border-radius属性

478 查看

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。