CSS3 - มุมมน
CSS3 มุมมนใช้เพื่อเพิ่มมุมสีพิเศษให้กับเนื้อหาหรือข้อความโดยใช้คุณสมบัติ border-radius ไวยากรณ์ง่ายๆของมุมมนมีดังนี้ -
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}ตารางต่อไปนี้แสดงค่าที่เป็นไปได้สำหรับมุมโค้งมนดังนี้ -
| ซีเนียร์ | มูลค่าและรายละเอียด |
|---|---|
| 1 | border-radius ใช้องค์ประกอบนี้สำหรับการตั้งค่าคุณสมบัติรัศมีนักเรียนสี่คน |
| 2 | border-top-left-radius ใช้องค์ประกอบนี้สำหรับการตั้งค่านักเรียนประจำที่มุมซ้ายบน |
| 3 | border-top-right-radius ใช้องค์ประกอบนี้เพื่อตั้งค่านักเรียนประจำที่มุมขวาบน |
| 4 | border-bottom-right-radius ใช้องค์ประกอบนี้สำหรับการตั้งค่านักเรียนประจำที่มุมล่างขวา |
| 5 | border-bottom-left-radius ใช้องค์ประกอบนี้สำหรับการตั้งค่านักเรียนประจำที่มุมล่างซ้าย |
ตัวอย่าง
คุณสมบัตินี้สามารถมีได้สามค่า ตัวอย่างต่อไปนี้ใช้ทั้งสองค่า -
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
สถานที่ให้บริการแต่ละมุม
เราสามารถระบุคุณสมบัติแต่ละมุมได้ดังตัวอย่างด้านล่าง -
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>มันจะให้ผลลัพธ์ดังต่อไปนี้ -