Page 83 - css揭秘
P. 83
9 自适应的椭圆
背景知识
border-radius 属性的基本用法
难题
你可能注意到过，给任何正方形元素设置一个足够大的 border-
radius，就可以把它变成一个圆形。所用到的 CSS 代码如下所示：
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 正方形边长的一半 */
你可能还注意到了，如果指定任何大于 100px 的半径，仍然可以得到一
个圆形。规范特别指出了这其中的原因：
图 3-1
“当任意两个相邻圆角的半径之和超过 border box 的尺寸时，用户
给元素设置固定宽高以及一半长 代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠
度的 border-radius，可以得到
一个圆形 为止。”
——CSS 背景与边框（第三版）（http://w3.org/TR/css3-
background/#corner-overlap）
不过，我们往往不愿意对一个元素指定固定的宽度和高度，因为我们希
望它能根据其内容自动调整并适应，而内容的长短不可能在事先就知道。即
使是在设计一个静态网站的时候（元素的内容可以预先确定），我们也可能
需要在某个时刻改变其内容；或者我们为它准备了一款尺寸略有差异的回退
字体，而不同字体对相同内容的渲染结果很可能是不同的。在这个案例中，
我们通常期望达到这个效果：如果它的宽高相等，就显示为一个圆；如果宽
图 3-2 高不等，就显示为一个椭圆。可是，我们前面的代码并不能满足这个期望。
在前面的圆形示例中，当高度小 当宽度大于高度时，我们得到的形状如图 3-2 所示。那我们到底能不能用
于宽度时发生的情况；border-
radius 所产生的圆形用虚线标示 border-radius 来产生一个椭圆，甚至是一个自适应的椭圆呢？
52 第 3 章 形状
ࠡ JOEC
