border-radius属性

border-radius属性是用来给background添加圆角的。属性的值表示border曲线圆角曲线对应的半径。background的曲线的半径＝border的曲线的半径－border的width因此如果border的width>= border曲线的半径的时候，background将不会有圆角的属性。
例如如：

.test{
     border:solid 16px black;
     border-radius: 14px;
}
//这个样式，将会导致background没有圆角效果，background的曲线对应的半径为－2,将不会shape出这个曲线。border－radius 最好的使用方法是:border的宽度<border的曲线半径.例如：
.test{
     border:solid 16px black;
     border-radius: 20px;
}
//这种样式下，background会有一个曲线，曲线的半径为20-16=4。

---

其实，在css3中还有一种方法达到相同的模拟border的效果，那就是利用box-shadow属性，该属性表示的是box(只包括了background和border，是不包括margin)的阴影。
如果设置了阴影的width，并且阴影的垂直和水平方向都设置为0，时可以模拟出border的效果。这个时候阴影对应的曲线对应的半径＝border的半径＋阴影的width。

.test{
            position: absolute;
            margin: auto;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
           border-top-right-radius: 100px;
           /*padding: 20px;*/
            /*border-top-right-radius: 100px;*/
           padding: 10px;
           border:50px solid black;
           box-shadow: 0 0 0 50px red;
           width:100px;
           height: 200px;
           background: greenyellow;
        }

红色的地方为阴影，黑色是border，绿色是background。