首页 > 代码库 > border-radius

border-radius

1 border-radius 私有前缀

浏览器个把年前就把私有前缀给去掉了,现在完全没必要还傻傻使用-webkit-border-radius-moz-border-radius

2 border-radius百分比值

是相对于元素占据尺寸的百分比(类似jQuery outerWidth()/outerHeight()方法代表尺寸),也就是包含边框,padding后的尺寸。而不是单纯地相对于width/height

我们将border-radius: 300px还原成其整容前的模样,结果是:

border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;
border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

demo:设置的是200像素*300像素,border-radius:200px 0px 0xp 0px/300px  0 0 0;结果最后右上角显示的却是200像素*200像素半径下的圆弧效果,这显然不符合认知啊!!

实际上是这样的,CSS3圆角除了大值特性,还有一个等比例特性,就是水平半径和垂直半径的比例是恒定不变的。

回到上面例子,由于我们的元素占据宽度200像素,高度300像素。所以,根据大值特性,水平方向的300像素只能按照200像素半径渲染;再根据等比例特性,虽然垂直方向理论上的最大半径是300像素,但是受制于当初设定的300px*300px1:1比例,垂直方向最终渲染的半径大小也是200像素。于是,我们最后得到的只是一个200像素*200像素的圆弧。

第三节末尾所提到的“反而因为值设大了”就是指的这个。

可能有人会疑问,那该如何设置才能实现等同于border-radius:50%(显示椭圆)的效果呢。哈哈,如果你理解了上面的内容,其实就很简单了,最关键的一点就是比例关系。我们的元素占据的尺寸是200像素*300像素。所以,只要让水平半径和垂直半径保持2:3的比例就可以了,然后,可以利用“大值特性”设一个你认为安全的值就可以了。

demo{

width:200px;
height:300px;
background-color: red;
-webkit-border-radius: 200px/300px ;
-moz-border-radius: 200px/300px ;
border-radius: 200px/300px;

}

<div class="demo"></div>

 

 

 

 

来自:http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/

 

border-radius