border-radius

标签：百分比   rdp   strong   jquery   大小   tip   nbsp   简单   显示   

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*300px的1: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

标签：百分比   rdp   strong   jquery   大小   tip   nbsp   简单   显示   

原文地址：http://www.cnblogs.com/xiaofenguo/p/6269860.html