CSS มุมโค้งมน
CSS มุมโค้งมน
ด้วยคุณสมบัติ CSS border-radiusคุณสามารถกำหนดองค์ประกอบใดๆ ก็ได้ "มุมโค้งมน"
CSS border-radius คุณสมบัติ
คุณสมบัติ CSS
border-radiusกำหนดรัศมีของมุมขององค์ประกอบ
เคล็ดลับ:คุณสมบัตินี้ช่วยให้คุณเพิ่มมุมโค้งมนให้กับองค์ประกอบได้!
นี่คือตัวอย่างสามตัวอย่าง:
1. มุมโค้งมนสำหรับองค์ประกอบที่มีสีพื้นหลังที่ระบุ:
มุมโค้งมน!
2. มุมโค้งมนสำหรับองค์ประกอบที่มีเส้นขอบ:
มุมโค้งมน!
3. มุมโค้งมนสำหรับองค์ประกอบที่มีภาพพื้นหลัง:
มุมโค้งมน!
นี่คือรหัส:
ตัวอย่าง
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
}
เคล็ดลับ:ที่border-radiusจริงแล้ว คุณสมบัติเป็นคุณสมบัติชวเลขสำหรับ
border-top-left-radius, border-top-right-radius, border-bottom-right-radius
และborder-bottom-left-radiusคุณสมบัติ
CSS border-radius - ระบุแต่ละมุม
คุณสมบัติborder-radiusสามารถมีค่าได้ตั้งแต่หนึ่งถึงสี่ค่า นี่คือกฎ:
สี่ค่า - border-radius: 15px 50px 30px 5px; (ค่าแรกใช้กับมุมบนซ้าย ค่าที่สองใช้กับมุมบนขวา ค่าที่สามใช้กับมุมล่างขวา และค่าที่สี่ใช้กับมุมล่างซ้าย):
สามค่า - border-radius: 15px 50px 30px; (ค่าแรกใช้กับมุมบนซ้าย ค่าที่สองใช้กับมุมบนขวาและมุมซ้ายล่าง และค่าที่สามใช้กับมุมล่างขวา):
สองค่า - border-radius: 15px 50px; (ค่าแรกใช้กับมุมบนซ้ายและล่างขวา และค่าที่สองใช้กับมุมบนขวาและมุมล่างซ้าย):
หนึ่งค่า - border-radius: 15px; (ค่านี้ใช้กับมุมทั้งสี่ซึ่งโค้งมนเท่ากัน:
นี่คือรหัส:
ตัวอย่าง
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
คุณยังสามารถสร้างมุมวงรีได้:
ตัวอย่าง
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
คุณสมบัติ CSS มุมโค้งมน
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |