玩转border-radius

border-radius 圆角
1、border-radius的值可以为绝对单位px，和相对单位em，rem，也可以为百分比，值越大，弧度越大。

2、属性值位数不同时，表现也不同，具体可以参考图片。

3、你也可以设置单个角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。
注意: 每个半径的四个值的顺序是： 左上角，右上角，右下角，左下角。
如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

写一些div用来看效果:

  <div>
        <div class="border_radius"></div>
        <div class="border_radius"></div>
        <div class="border_radius"></div>
        <div class="border_radius"></div>
        <div class="border_radius"></div>
        <div class="border_radius"></div>
        <div class="border_radius"></div>
    </div>

CSS：

.border_radius{
    float: left;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    background-color: rosybrown;
    border-radius: 1em;
}
.border_radius:nth-child(2){
    border-radius: 50%;
}
.border_radius:nth-child(3){
    border-radius:20% 50%;
}
.border_radius:nth-child(4){
    border-radius:10% 20% 30% 40%;
}
.border_radius:nth-child(5){
    border-radius:1% 90% 1% 90%;
}
.border_radius:nth-child(6){
    border-radius:100% 50% 100% 50%;
}
.border_radius:nth-child(7){
    border-radius:0 50% 50% 50%;
}

OK