CSS3圆角边框（border-radius）

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。

语法：

border-radius: length;     /*值可以为像素px*/

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

意思就是说radius默认会生成4个圆（圆的半径取决于border-radius的值），分别贴到盒子的四个角。盒子的角与圆之间有一定距离，这个距离形成圆角。

利用border-radius生成圆形

首先需要准备一个正方形盒子（必须是正方形，长宽像素相等），然后border-radius的值为正方形盒子长宽的一半即可生成圆形！

写法：

div {
     width: 200px;
     height: 200px;
     border-radius: 100px;      /*长宽的一半*/
}

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
• 如果是个矩形，设置为高度的一半就可以做

复合写法：

div {
     width: 200px;
     height: 200px;
     border-radius: 10px 20px 30px 40px;
}

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

如果是一个值，代表4个角的圆角相同。

如果是两个值，那么是代表对角线的意思。左上角、右下角，右上角、左下角。

也可以分别定义某个角形成圆角：border-top-left- radius、 border-top- right-radius、 border- bottom- right- radius和border-bottom-left-radius