css3 border-radius详解

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).