border-radius的用法与技巧总结

border-radius属性用法重点罗列

1. border-radius: none | <length>{1,4} [/<length>{1,4}] ? 。如果存在反斜杠/，则反斜杠/之前表示圆角的水平方向半径，之后表示垂直方向半径；如果没有反斜杠/，表示二者相等。四个值按照top-left、top-right、bottom-right、bottom-left这样的顺序来设置。
   特殊的：如果要重置元素没有圆角，取值none无效，需将元素的border-radius设置为0.
2. border-radius拥有四个派生属性，例如border-top-left-radius，这些属性需要增加前缀才能正确使用。
3. 分开设置各个顶角的圆角的水平和垂直半径时不需要反斜杠/。
4. 在一行内写完4个角的水平垂直半径应如下格式：border-radius：60px 20px 30px 40px / 60px 20px 30px 40px ，反斜杠“/”之前的为水平半径，之后为垂直半径。
5. 只有当border-collapse属性值为separate时，表格圆角才能显示。
   

border-radius使用技巧与代码示例

一、内外半径
border-radius内部半径等于外部半径减去对应border-width。当差值小于等于0时，元素内角为直角，当差值大于零时，为圆角，且差值越大，圆角越明显。

    内角为直角

  内角为圆角

 

二、两边颜色不同时，两条相邻边颜色与样式转变的中心点在一个和两边宽度成正比的角上。

三、圆形：元素高宽相同，圆角半径为高宽的一半

当border-width较大时，圆角半径应设置为元素的高与border-width的和的一半，或者直接设置50%。

四、半圆，设置两个border-radius。扇形，设置一个border-radius。椭圆。