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。