Page 84 - css揭秘

解决方案

说到 border-radius，有一个鲜为人知的真相：它可以单独指定水平
和垂直半径，只要用一个斜杠（/）分隔这两个值即可。这个特性允许我
们在拐角处创建椭圆圆角（参见图 3-3）。因此，如果我们有一个尺寸为
200px×150px 的元素，就可以把它圆角的两个半径值分别指定为元素宽高的
一半，从而得到一个精确的椭圆：

border-radius: 100px / 75px; 图 3-3
一个容器设置了不相等的水平和
我们可以在图 3-4 中看到结果。 垂直 border-radius；拐角处的
弧线现在呈现出椭圆的形状，这
但是，这段代码存在一个很大的缺陷：只要元素的尺寸发生变化，
个椭圆的水平和垂直半径就是我
border-radius 的值就得跟着改。我们在图 3-5 中可以看到，当元素的尺寸 们为 border-radius 指定的值，
变为 200px×300px 时，如果 border-radius 没有跟着改变，会发生什么后 在图中用虚线标示
果。因此，如果我们的元素尺寸会随着它的内容变化而变化，这就是一个问
题了。

难道我们真的走投无路了吗？其实，border-radius 这个属性还有另外
一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个
百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度
用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂
直半径。因此，如果要创建一个自适应的椭圆，我们可以把这两个半径值都
设置为 50%：
图 3-4
通过非对称的 border-radius 曲
border-radius: 50% / 50%;
线来创建一个椭圆
由于斜杠前后的两个值现在是一致的（即使它们最终可能会被计算为不
同的值），我们可以把这行代码进一步简化为：

border-radius: 50%;

最终，只需要这一行代码，我们就可以得到一个自适应的椭圆了。

试一试 play.csssecrets.io/ellipse

小 花 絮 为什么叫border-radius？

可能有人会奇怪，border-radius 到底由何得名。这个属性并不需要边框来参与工作，似乎把它叫作
corner-radius 更贴切一些。这个名字乍听起来确实让人摸不着头脑，其实原因在于 border-radius 是
对元素的 border box 进行切圆角处理的。当元素没有边框时，可能还看不出差异；当它有边框时，则
以边框外侧的拐角作为切圆角的基准。边框内侧的圆角会稍小一些（严格来说内角半径将是 max(0,
border-radius-border-width)）。

9 自适应的椭圆 53

඀ࠡ JOEC