Page 86 - css揭秘
P. 86
基于前两条观察，我们可以推断出，左半径和右半径在水平方向上
的值应该均为 50%。
再看看垂直方向，似乎顶部的两个圆角占据了整个元素的高度，而
且底部完全没有任何圆角。因此，在垂直方向上 border-radius 的
合理值似乎就是 100% 100% 0 0。
因为底部两个角的垂直圆角是零，那么它们的水平圆角是多少就完
全不重要了，因为此时水平圆角总是会被计算为零。（你能想像一个
垂直半径为零而水平半径为正值的圆角吗？没错，连写规范的作者
们都做不到。）
图 3-7
为 border-radius 属性分别指定
4、3、2、1 个由空格分隔的值
时，这些值是以这样的规律分配
到四个角上的（请注意，对椭圆
半径来说，斜杠前和斜杠后最多
可以各有四个参数，这两组值是
以同样的方法分配到各个角的）
邮
电
把所有这些结论综合起来，我们就可以很容易地写出 CSS 代码，来生
成图 3-6 中那样自适应的半椭圆：
border-radius: 50% / 100% 100% 0 0;
接下来举一反三，用 CSS 代码来生成一个沿纵轴劈开的半椭圆（如图
3-8 所示）应该就很容易了： 图 3-8
一个沿纵轴劈开的半椭圆
border-radius: 100% 0 0 100% / 50%;
这里给你留个练习：试试用 CSS 代码写出椭圆的另外一半吧。
试一试 play.csssecrets.io/half-ellipse
四分之一椭圆
在创建了一个完整的椭圆和半椭圆之后，很自然的下一个问题就是如何
1①
生成四分之一椭圆 （其形状如图 3-9 所示）。延续前面所讲的思路，我们注
图 3-9
① 与半椭圆的情况类似，当这个形状的宽度和高度相等时，其实就变成了四分之一圆（即 90° 四分之一椭圆
扇形）。
9 自适应的椭圆 55
ࠡ JOEC
