border-radius内部

·  阅读 187

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-radius2=高度=宽度,才会出现圆。(border-width较大时,还要算上边框),如border-radius2=(border-width+width),或者整体的用50%;

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

eg

border{2em 0.5em 2em 2.5em}

border-radius:0.5em 2em;

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改