CSS3圓角用於使用border radius屬性向正文或文本添加特殊顏色的角點;
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
下表顯示了圓角的可能值，如下所示;
| Sr.No. | Value & Description |
|---|---|
| 1 | 邊界半徑 使用此元素設置四個邊界半徑屬性 |
| 2 | 邊框左上半徑 使用此元素設置左上角的邊框 |
| 3 | 邊框右上半徑 使用此元素設置右上角的邊框 |
| 4 | 邊框右下半徑 使用此元素設置右下角的邊框 |
| 5 | 邊框左下半徑 使用此元素設置左下角的邊框 |
Example
此屬性可以有三個值。下面的示例同時使用值−
<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>
它將產生以下結果&負;
Each Corner property
我們可以指定每個角屬性，如下例所示−
<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>
它將產生以下結果&負;