Page 85 - css揭秘

半椭圆

现在我们已经知道如何用 CSS 来生成一个自适应的椭圆了，接下来很
自然地就会问到：我们是否还能生成其他常见的形状呢，比如椭圆的一部
1①
分？让我们先来思考一下半椭圆 吧（参见图 3-6）。
它是沿纵轴对称，而不是沿横轴对称的。即使我们还不知道 border-
radius 的值该是多少（或者是不是真的存在合适的值），但至少有一件事情
是很清楚的：我们需要给每个角指定不同的半径。但是，我们目前为止所尝
试过的所有值都只能把所有四个角指定为同一个值。

幸运的是，border-radius 的语法比我们想像中灵活得多。你可能会惊
讶地发现 border-radius 原来是一个简写属性。我们可以为元素的每个角
图 3-5 指定不同的值，而且还有两种方法可以做到这一点。第一种方法就是使用它
当元素的尺寸发生变化时，我们 所对应的各个展开式属性：
的椭圆形状就崩坏了；不过话说
回来，用这个形状来绘制立体效 „ border-top-left-radius
果的圆柱体倒是挺不赖的
„ border-top-right-radius
„ border-bottom-right-radius

„ border-bottom-left-radius
不过，真正简洁的方法还是使用 border-radius 这个简写属性，因为
我们可以向它一次性提供用空格分开的多个值。如果我们传给它四个值，这
四个值就会被分别从左上角开始以顺时针顺序应用到元素的各个拐角。如果
我们提供的值少于四个，则它们会以 CSS 的常规方式重复，类似于 border-
图 3-6
width 的值。如果只提供了三个值，则意味着第四个值与第二值相同；如果
半椭圆
只有两个值，则意味着第三个值与第一个相同。图 3-7 对它的工作原理提供
了一个图形化的解释。我们甚至可以为所有四个角提供完全不同的水平和垂
直半径，方法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值。请注
意这两组值是单独展开为四个值的。举例来说，当 border-radius 的值为
10px / 5px 20px 时，其效果相当于 10px 10px 10px 10px / 5px 20px
5px 20px。

在掌握了这个新发现的知识之后，现在让我们来重新审视半椭圆的问
题。以这样的方式来指定 border-radius 真的可以生成我们想要的形状
吗？试了才知道。让我们先来观察一些细节。

„ 这个形状是垂直对称的，这意味着左上角和右上角的半径值应该是
相同的；与此类似，左下角和右下角的半径值也应该是相同的。
„ 顶部边缘并没有平直的部分（也就是说，整个顶边都是曲线），这意
味着左上角和右上角的半径之和应该等于整个形状的宽度。

① 半椭圆是可以变成半圆的，只要它的宽度刚好伸展到高度的两倍（或者对一个沿纵轴劈开的
椭圆来说，是高度伸展为宽度的两倍）。

54 第 3 章 形状

඀ࠡ JOEC