css3中的边框圆角border-radius的用法

链接

使用css3绘制qq的logo

border-radius的用法与技巧总结

1、只有元素的border不是separate时，border-radius才有效果。

2、border-radius中的值如果不加斜杠，则表示水平半径和垂直半径相等; 如果有斜杠时，斜杠前表示水平半径，斜杠后表示垂直半径。如果是单独的一个角(如border-top-left-radius:10px 20px,)在设置水平和垂直半径时不需要加斜杠。

3、在用border-radius时，元素的内部半径是border-radius减去border-width，border-radius<border-width时，内部角为直角，大于时为圆角，差值越大越远。

4.border-radius*2=高度=宽度，才会出现圆。（border-width较大时，还要算上边框），如border-radius*2=(border-width+width),或者整体的用50%；

5.当元素的宽度或高度大小不能容纳内部的两个圆或椭圆时，两个圆的半径就会按比例缩小为元素刚好容纳。

eg

border{2em 0.5em 2em 2.5em}

border-radius:0.5em 2em;

在这种情况下，实际的border-radius:0.4em 1.6em;