写法
border-radius: length;
参数值可以是数值或者百分比的形式
圆形
如果是正方形,要设置成一个圆形,将参数设置成矩形长度或宽度的一半即可
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
/* border-radius: 100px; */
}
圆角矩形
将参数设置为高度的一半。
.juxing {
width:400px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
属性的其他写法
- 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
- 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius