css33之圆角边框——学习笔记15

写法

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