CSS3中新增了圆角边框样式，可以将盒子变为圆角。

border-radius

用于设置元素的外边框圆角。

语法：

border-radius:length;

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%/

如果是个矩形，将length设置为高度的一半就可以做一个圆角矩形

该属性是一个简写属性，可以跟4个值，分别代表左上角、右上角、右下角、左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

例：

代码段：

.yuanxing{

width: 200px;

height: 200px;

background-color: pink;

/*border-radius: 100px;*/

/*设置为50%的意思就是宽度的一半*/

border-radius: 50%;

}

.juxing{

width: 400px;

height: 200px;

background-color: pink;

/*圆角矩形设置为高度的一半*/

border-radius: 100px;

}

.radius{

width: 400px;

height: 200px;

background-color: pink;

/*设置的顺序为左上,右上,右下,左下,顺时针*/

/*border-radius: 10px 30px 50px 100px;*/

/*也可以跟两个值*/

/*border-radius: 50px 100px;*/

/*也可以跟三个值*/

/*border-radius: 10px 100px 50px;*/

/*还可以分开写*/

border-top-left-radius: 10px;

border-top-right-radius: 30px;

border-bottom-right-radius: 50px;

border-bottom-left-radius: 100px;

/*需要记住的是先top/bottom,再left/right*/

}

radius(半径)圆角原理：设置一个length半径大小的圆与盒子相交，保留相交后的圆角。