border-radius属性的使用方法

//border-radius用来实现圆角边框。
div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 20px;
        }

效果图：

 

//border-radius设为150px，就会变成圆形边框
//为了方便，直接把border-radius设为50%也行。效果是一样的。但是如果想画圆，则width和height必须要相等
div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 150px;
        }

效果图：

事实上，border-radius后可以接多个属性值，像上面的一个属性值则默认四角都为该属性值，若是四个属性值显然是与四角相对，这么个相对法呢？从左上角开始，顺时针一一对应。 

 div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 50px 0px 20px 100px;
        }

效果图：