border-radius用于使元素边框产生圆角:
border-radius:length{1,4}[/length{1,4}]
eg:
border-radius:15px 30px /20px;
"/"前表示水平半径,后表示垂直半径。
如果没有“/”,则垂直半径和水平半径一致。
eg1:
border-radius:15px;
四个角的水平和垂直半径都为15px;
eg2:border-radius:15px 30px;
top-left bottom-right的水平和垂直半径为15px;
top-right bottom-left的水平和垂直半径为30px;
eg3:border-radius:15px 20px 30px;(三个参数的情况是top-left为参数1,top-right、bottom-left为参数2,bottom-right为参数3)
如果是三个参数,那么
top-left:为15px;
top-right/bottom-left为20px;
bottom-right为30px;
水平半径和垂直半径相同。
eg4:border-radius:15px 20px/20px 30px
top-left:15px 20px
top-right:20px 30px
bottom-right:15px 20px
bottom-left:20px 30px
eg5:border-radius:15px 20px/20px 30px 15px
top-left:15px 20px;
top-right:20px 30px;
bottom-right:15px 15px;
bottom-left:20px 30px
总之:如果有“/”来分水平和垂直半径,那么斜杠前后的水平参数和垂直参数都按TRBL的顺序来排列。
another:
border-radius还有内半径和外半径的区别;
当元素的border-width一定时,border-radius小于或等于border-width时,边框内部不具有圆角效果。
为何当border-radius的半径小于元素边框的厚度时,内部没有圆角效果?我在这里说一下,因为我们的border-radius的内径值是等于外径值减去边框厚度值,当他们的值为负时,内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时,我们内外曲线的圆心才会在同一位置。
table元素只有在border-collapse为separate时,border-radius才有效果。
img元素运用border-radius时,只有在firefox4.0以上的浏览器中才有效果,在其他浏览器中无效果。
要使元素(包括边框)为圆形,那么border-radius为(padding+border-width+width/2);
如果border-radius大于(padding+border-width+width/2),那么border-radius的实际大小仍为(padding+border-width+width/2).