วิธีสร้างมุมโค้งมนด้วย CSS

วิธีทำมุมมนโดยใช้ CSS: CSS สามารถทำสิ่งที่ยอดเยี่ยมได้ หนึ่งในนั้นคือการทำมุมให้ดูดี ด้วยโค้ด CSS เพียงไม่กี่บรรทัด คุณสามารถทำให้มุมขององค์ประกอบ HTML ดูดีขึ้นและสร้างภาพที่น่าทึ่งเพื่อให้ผู้ใช้โต้ตอบด้วย

ในบทช่วยสอนนี้ เราจะเริ่มต้นด้วยการแสดงวิธี ทำมุมมน จากนั้น เราจะแสดงให้คุณเห็นว่าคุณสามารถใช้แนวคิดเหล่านี้ในการออกแบบของคุณเองได้อย่างไร ซึ่งเราเรียกว่า “มุมแฟนซี” ด้านล่างเราจะกล่าวถึงขั้นตอนในการสร้างมุมโค้งมนโดยใช้ CSS

วิธีทำมุมมนโดยใช้ CSS

มาตรฐาน

สำหรับเบราว์เซอร์ต่างๆ รวมถึง Chrome และ Firefox เราอาจกำหนดมุมมนของ CSS โดยใช้ border-radius คุณสมบัติโดยนำหน้าคุณสมบัติด้วย-webkit และ-moz “-webKit” และ “-moz” เป็นคำนำหน้าผู้ขายใน CSS ที่นำเสนอโดยเครื่องมือแสดงผลของ Chrome และ Firefox ตามลำดับ คำนำหน้าเหล่านี้ช่วยให้เราสามารถใช้คุณสมบัติ CSS โดยไม่ทำให้เกิดความไม่สอดคล้องกัน

มุมแต่ละส่วน

คุณสมบัติ border-radius เป็นวิธีชวเลขเพื่อกำหนดรัศมีของมุมทั้งหมดขององค์ประกอบ เราสามารถกำหนดรัศมีเส้นขอบสำหรับแต่ละมุมได้เอง

Shorthhand Property

เราสามารถระบุค่าเดียวได้หากต้องการปัดเศษมุมให้เท่ากัน เราสามารถระบุได้สองค่า ค่าแรกกำหนดมุมบนซ้ายและมุมล่างขวา ในขณะที่อีกค่าหนึ่งใช้กับมุมบนขวาและมุมล่างซ้าย เราสามารถระบุได้สามค่า ค่าแรกใช้กับมุมซ้ายบน ค่าที่สองใช้กับมุมบนขวาและมุมล่างซ้าย และค่าที่สามใช้กับมุมล่างขวา เรายังสามารถระบุค่าสี่ค่าได้อีกด้วย ค่าแรกใช้กับมุมซ้ายบน ค่าที่สองใช้กับมุมขวาบน ค่าที่สามใช้กับมุมล่างขวา และค่าที่สี่ใช้กับมุมล่างซ้าย คุณสมบัติชวเลขสำหรับ Mozilla ที่เทียบเท่า

การปัดเป็นวงรี

อาจมีบางครั้งที่เราชอบมุมวงรีมากกว่ามุมที่สมมาตรอย่างสมบูรณ์ ในการสร้างมุมแบบนี้ เราสามารถใส่เครื่องหมายทับระหว่างรัศมีแนวนอนและแนวตั้ง

ค่าคู่เดียวสำหรับรัศมีแนวนอนและแนวตั้งจะล้อมรอบทั้งสี่มุม ถ้าเราต้องการรูปร่างที่ซับซ้อนมากขึ้น เราสามารถใช้ค่าละสี่ค่าสำหรับรัศมีแนวนอนและแนวตั้ง ตัวอย่าง คุณสมบัติขององค์ประกอบยังคงเหมือนเดิมสำหรับการปัดเศษเป็นวงรี เราสามารถระบุรัศมีเส้นขอบสำหรับแต่ละมุมโดยใช้ค่าที่คั่นด้วยช่องว่างแทนค่าที่คั่นด้วยเครื่องหมายทับ ตัวอย่าง

การปัดเป็นวงรี (Firefox 3.5+)

เราต้องการ-moz-prefix เนื่องจาก Mozilla Firefox 3.5 อนุญาตให้ใช้เฉพาะมุมมนเท่านั้น อย่างไรก็ตาม Firefox เวอร์ชันล่าสุดยังเปิดใช้งานมุมวงรี

คำถามที่พบบ่อย

มุมโค้งมนเป็นคุณลักษณะของ CSS3 หรือไม่

ก่อนใช้ CSS3 หากเราต้องการกล่องหรือ ปุ่มที่มีมุมมน ผู้ออกแบบจะต้องสร้างปุ่มสี่ปุ่มที่มีมุมมนและเรียงตามมุมของกล่องโดยใช้ HTML และ CSS แต่การทำ CSS3 ทำได้ง่ายโดยการเพิ่มคุณสมบัติ CSS ใหม่ที่เรียกว่า “border-radius”

คุณสมบัติใดช่วยให้คุณสร้างมุมมนได้

คุณสมบัติ CSS นี้กำหนดเส้นขอบมนและจัดเตรียมมุมมนรอบองค์ประกอบ แท็ก หรือ div กำหนดรัศมีของมุมขององค์ประกอบ ย่อมาจาก border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

คุณสมบัติ CSS ใดที่ใช้ในการเพิ่ม มุมโค้งในองค์ประกอบของวัตถุ?

เมื่อใช้ CSS คุณสมบัติ border-radius จะใช้เพื่อทำให้องค์ประกอบมีมุมโค้งมน คุณสมบัติ border-radius เป็นชวเลขสำหรับคุณสมบัติย่อยทั้งสี่ที่ใช้เพื่อให้แต่ละมุมขององค์ประกอบเว็บเป็นมุมมน