border-radius属性

border-radius属性

原文：
- http://www.zhangxinxu.com/wordpress/?p=4992
- MDN

CSS属性 border-radius 用来设置边框圆角。

语法
border-radius: 1-4 length|% / 1-4 length|%;

例如：
border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;
以/分隔，第一部分代表水平圆角半径，第二部分代表垂直圆角半径。（顺序为左上、右上、右下、左下。）
- 只有第一部分时，四个角为圆角；
- 两个部分都设置时确定一个椭圆，与边框交集形成为椭圆形角（特别的，当某个角的水平值和垂直值相等时，也就为圆角）

半径的第一个语法取值可取1~4个值:
/* 四个角相同 */      
border-radius: 10px;  

/*top-left-and-bottom-right  | top-right-and-bottom-left */
/*两个值，第一个为左上（右下相同），第二个为右上（左下相同）*/
border-radius: 10px 5%;  


/*top-left | top-right-and-bottom-left | bottom-right */
/*三个值，分别为左上、右上（左下相同）、右下*/
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

半径的第二个语法取值也可取1~4个值
/* (first radius values) / radius */
/*椭圆--左上和右下：h=10px, v=20px;右上和左下：h=5%,v=20px*/
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

取值
length | %
【注意点】取值为百分比时，是相对于width/height、padding和border的总尺寸。而不是单纯地相对于width/height值。

.radius-test1 { width: 100px; height: 100px; border: 50px solid #cd0000; border-radius: 50%; }
-----------
<div class="radius-test1></div>

效果图: r=(100px+2x50px)x50%=100px

（显然，当两部分中某一个取值为0时，此角仍为直角）