border-radios圆角边框的使用以及常见形状绘制

圆角边框的使用

常见形状绘制

不规则形状：

.div1{

width: 200px;

height: 200px;

background: green;

margin: 0 auto;

/* 中间加个斜杠：水平方向圆角（单边）/垂直方向圆角（单边） */

border-radius: 20px/60px;

}

效果：

 

椭圆：

.div2{

            /* 长方形制作椭圆 */

            width: 500px;

            height: 200px;

            background: red;

            margin: 0 auto;

            border-radius: 50%;

        }

效果：

 半圆：

.div3{

            /* 长是宽的两倍制作出半圆形 */

            width: 200px;

            height: 100px;

            background: aqua;

            margin: 0 auto;

            border-radius: 100px 100px 0 0;

        }

效果：

 

扇形：

.div4{

            /* 正方形制作出扇形 */

            width: 200px;

            height: 200px;

            background: aqua;

            margin: 0 auto;

            border-radius: 200px 0 0 0;

        }

效果：