border-radius详解

语法：

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

取值范围：

<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

取值有以下几种情况：

一个值：四个圆角值相同

两个值：第一个值为左上角和右下角，第二个值为左下角和右上角

三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角

四个值：依次对应左上角，右上角，右下角，左下角

举一个栗子，比如是三个值的情况：

.box{
    width: 100px;
    height: 100px;
    background-color: #3AD7D7;
    border:2px solid red;
    border-radius:20px 30px 40px;
}

效果：

接下来看另外一种情况，就是细分了水平半径和垂直半径的情况：

.box{
    width: 100px;
    height: 100px;
    background-color: #3AD7D7;
    border:2px solid red;
    border-radius:20px / 40px;
}

效果：

这样的话，水平半径和垂直半径分别设置了，不再一样，这里垂直半径设置成了40px，已经接近盒子的一半高度，弧度非常平滑了。

20px / 40px  斜杠‘/’前面的是水平半径的值，后面是垂直半径的值。同样，每个角的水平和垂直半径也可以分别设置成不一样的，同样，每个角的水平和垂直半径也可以分别设置成不一样的。

画一个圆：

.box{
    width: 100px;
    height: 100px;
    background-color: #3AD7D7;
    border:2px solid red;
    border-radius:51px;
}

这里可以设置成50%，但是边框2px，所以也考虑进去，设置成51px。