CSS3圆角用于通过使用property.A圆角的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>