小猪乔治和border-radius

最新推荐文章于 2021-07-17 15:20:44 发布

weixin_34357928

最新推荐文章于 2021-07-17 15:20:44 发布

阅读量339

点赞数

原文链接：https://segmentfault.com/a/1190000015294726

版权

之前看了一篇关于用CSS来画小猪佩奇的文章，抱着锻炼自己的心态造了个轮子，画了个佩奇的小弟乔治，效果可以看这里，源码在这里。

开发过程中也让我对border-radius这个属性有了更深刻的理解。

以前我在使用这个属性时，只知道这个是表示圆角，常用border-radius: 5px实现圆角长方形或者border-radius: 50%来画圆形。在开发小猪的过程中，会需要使用许多不太规则的形状，因此需要了解该属性更深入的原理，才能满足我的开发需求。

该属性的完全体如下：

border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;

即任何值都可以转为该种形式。例如，border-radius: 50%等价于border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%。name这8个值分别代表什么含义呢？

矩形的四个圆角我们可以分别进行控制，例如矩形的左上圆角由x1和y1来控制，将一个水平半径为x1，垂直半径为y1的椭圆与矩形左上角相切，相切的两个点之间的圆弧就是最终的圆角曲线。如下图所示。

同理，x2和y2控制右上角，x3和y3控制右下角，x4和y4控制左上角。控制的方式与左上角的类似。

如果对应的x和y值相等，则可以省略成border-radius: x1 x2 x3 x4的形式；如果这些x也都相等，则可以省略成border-radius: x1的形式。
当值使用百分比时，x取值是参照矩形的宽度，y是参照矩形的高度。比如宽200px，高100px的矩形，如果设置border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%，转换成像素等价于border-radius: 20px 20px 20px 20px / 10px 10px 10px 10px。
当设置border-radius: 100%时，发现其表现与border-radius: 50%相同。这是因为如果水平方向的两个半径和（x1+x2或者x3+x4）大于宽度，或者垂直方向的两个半径和(y1+y3或y2+y4)大于高度时，浏览器会对它们进行等比例缩小，知道不再超出为止。