CSS3圆角用于通过使用border-radius 属性为正文或文本添加特殊的彩色圆角，语法如下-
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
下表显示了圆角的可能值，如下所示:
| Sr.No. | Value & Remark |
|---|---|
| 1 |
border-radius 使用此元素设置四个边界半径属性 |
| 2 |
border-top-left-radius 使用此元素设置左上角的边框 |
| 3 |
border-top-right-radius 使用此元素设置右上角的边框 |
| 4 |
border-bottom-right-radius 使用此元素设置右下角的边框 |
| 5 |
border-bottom-left-radius 使用此元素设置左下角的边框 |
Rounded Corner示例
<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>
它将产生以下输出-
参考链接
https://www.learnfk.com/css/css3-rounded-corner.html
标签：CSS3,无涯,height,padding,width,radius,background,border From： https://blog.51cto.com/u_14033984/9393158