CSS3 border-radius属性
CSS3 border-radius属性可以让我们轻松地将元素的边框设置为圆角,以提供更加美观的视觉效果。它可以用于设置圆角矩形、椭圆形、圆形等多种形状。
使用方法
-
使用border-radius属性可以设置一个边框的圆角,语法如下:
border-radius: 1-4 length | % / 1-4 length | %其中,length可以是任何长度单位,如px、em、rem等,或者百分比。
-
如果要设置四个边框的圆角,可以使用border-radius属性,语法如下:
border-radius: 1-4 length | %其中,length可以是任何长度单位,如px、em、rem等,或者百分比。
-
如果要设置四个边框的不同圆角,可以使用border-radius属性,语法如下:
border-radius: top-left 1-4 length | % | / top-right 1-4 length | % | / bottom-right 1-4 length | % | / bottom-left 1-4 length | %其中,length可以是任何长度单位,如px、em、rem等,或者百分比。
示例
以下示例演示了如何使用border-radius属性设置元素的边框圆角:
div {
width: 200px;
height: 200px;
background-color: #ccc;
border-radius: 10px;
}
上面的代码将设置一个200像素宽200像素高的div元素,并将其边框设置为10像素的圆角。