CSS3 border-radius属性

我们首先看两个列子

.box1 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 50%; }

.box2 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 300px; }

一、border-radius 百分比值是相对于元素占据尺寸的百分比(类似jQuery 

outerWidth()

/

outerHeight()

方法代表尺寸)，也就是包含边框，padding后的尺寸。而不是单纯地相对于

width/height

值。

案例中的元素尺寸是200px*300px;
border-radius：50% 相当于设置了border-radius:100px 150px；所以形成了椭圆！

而

border-radius:300px;为什么只形成跑道形状呢？

border-radiu

有一个大值特性，也就是值很大的时候，只会使用能够渲染的圆角大小渲染。 border-radius:300px;时 渲染的角度只有水平100px 垂直150px 另外，CSS3圆角除了大值特性，还有一个等比例特性，就是水平半径和垂直半径的比例是恒定不变的（和设置的border-radius的值比列一致）。回到上面例子，由于我们的元素占据宽度200像素，高度300像素。所以，根据大值特性，水平方向的

200

像素只能按照

100

像素半径渲染；再根据等比例特性，虽然垂直方向理论上的最大半径是

300

像素，但是受制于当初设定的

300px*300px

的

1:1

比例，垂直方向最终渲染的半径大小也是100像素。于是，我们最后得到的是一个跑道形状。