Page 57 - css揭秘

这个方法很好，但要求我们使用两个元素，而我们只需要一个元素。有
没有办法可以只用一个元素达成同样的效果呢？

解决方案

其实上述方案要更加灵活一些，因为它允许我们充分运用背景的能力。
举个例子，如果我们希望这一圈“边框”不只是纯色的，而是要加一层淡淡
的纹理，它也可以很容易地做到。不过，如果只需要达成简单的实色效果，
那我们就还有另一条路可走，只需用到一个元素（但这个办法有一些 hack

图 2-16 的味道）。我们来看看以下 CSS 代码：
对一个有圆角的元素使用 outli- background: tan;
ne 属性
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

你能猜到视觉效果是怎样的吗？它产生的效果正如图 2-15 所示。我们
基本上受益于两个事实：描边并不会跟着元素的圆角走（因而显示出直角，
图 2-17 参见图 2-16），但 box-shadow 却是会的（参见图 2-17）。因此，如果我们
对一个有圆角的元素使用没有 把这两者叠加到一起，box-shadow 会刚好填补描边和容器圆角之间的空隙，
偏移量、没有模糊效果的 box- 这两者的组合达成了我们想要的效果。图 2-18 把投影和描边显示为不同的
shadow 属性 颜色，从而在视觉上提供了更清晰的解释。

请注意，我们为 box-shadow 属性指定的扩张值并不一定等于描边的宽
度，我们只需要指定一个足够填补“空隙”的扩张值就可以了。事实上，指
定一个等于描边宽度的扩张值在某些浏览器中可能会得到渲染异常，因此我
推荐一个稍小些的值。这又引出了另一个问题：到底多大的投影扩张值可以
图 2-18
填补这些空隙呢？
为了事情的真相看起来更清楚，
我们把描边显示为黑色，把投影 为了解答这个问题，我们需要回忆起中学时学过的勾股定理，用来计算
显示为品红色；请注意描边是绘 直角三角形各边的长度。勾股定理表明，如果直角边分别是 a 和 b，则斜边
制在上层的
2
（正对着直角的最长边）等于 a + b 。当两条直角边的长度相等时，这个
2
2
算式会演化为 2a = a 2 。
! 你可能还很纳闷，中学几何到底是怎么跟我们的内圆角效果扯上关系
为什么说这个方法有点
hack 的味道？因为它依赖于描 的？关于怎样用它来计算我们需要的最小扩张值，请看图 2-19 中图形化
边不跟着圆角走的这个事实，但 的解释。在我们的例子中，border-radius 是 .8em，那么最小的扩张值就
我们无法保证这种行为是永远不 是 0.8 (2 1)r− ) ≈0.8 ( 2 −1 0.331 370 85 em 。我们要做的就是把它稍微向上取个整，
变的。当前的规范在描边的绘制 把 .34em 设置为投影的扩张半径。为了避免每次都要计算，你可以直接使用
方面给了浏览器非常多的余地，
但根据 CSS 工作组最近的讨论 圆角半径的一半，因为 21 0.5−< 。
来看，未来规范将会明确地建议 请注意，该计算过程揭示了这个方法的另一个限制：为了让这个效果得
描边跟着圆角走。浏览器是否会
遵从这个决定，我们到时候就知 以达成，扩张半径需要比描边的宽度值小，但它同时又要比 (2 1)r− 大（这
道了。

26 第 2 章 背景与边框

඀ࠡ JOEC