css border-radius知多少 小结

首先需要明确一点:border-radius是作用在width+padding+border的框上的。

border-radius有两个规则:

  1. 大值特性:在某一方向上,border-radius的最大值为元素框的值
  2. 等比特性:期望的(即显示设置的)水平值/垂直值=实际的(即最终计算出的)水平值/垂直值

以元素200 x 300为例:

对“大值特性”来说,那border-radius的止水平方向的最大值就为200。如果没有右上角的border-radius,那左上角的border-radius的水平方向最大为200; 如果有右上角border-radius,那左上角水平+向上角水平的最大值为200,左、右方向的水平值按期望值等比计算,即:设置 border-top-left-radius:300 20; border-top-right-radius:100 20; 那实际计算出的是:border-top-left-radius:150 20; border-top-right-radius:50 20;  (垂直方向的规则也一样)

对“等比特性”来说,设置border-top-left-radius::300 300,那实际计算后的值是 border-top-left-radius:200 200,算法是:期望的水平300 : 期望的垂直300 = 1 : 1 = x : y,x<=200 && y<=300,所以x的最大值是200,y:x=1:1,所以y也变成了200。

当然,他们会相互作用的:border-top-left-radius:300 200; border-top-right-radius:100 300,实际结果是:border-top-left-radius:150 100; border-top-right-radius:50 150。计算规则是
左上角:元素水平方向200 * 左上角水平300 / (左上角水平300 + 右上角水平100) = 150;计算后的水平150 : 计算后的垂直y = 期望的水平300 : 期望的垂直200,所以计算后的垂直y为100。
右上角:同理,右上角的水平占元素宽的 25% ,为50;期望的水平100 : 期望的垂直300 = 计算出的水平50 : 计算出的垂直y,故而y=150。

参考:秋月何时了,CSS3 border-radius知多少?            现撸看效果

 

发表评论

电子邮件地址不会被公开。