Page 52 - css揭秘

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

这并没有什么了不起的，因为你完全可以用 border 属性来生成完全一
样的边框效果。不过 box-shadow 的好处在于，它支持逗号分隔语法，我们
可以创建任意数量的投影。因此，我们可以非常轻松地在上面的示例中再加
上一道 deeppink 颜色的“边框”：

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

唯一需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶
层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代
码中，我们想在外圈再加一道 5px 的外框，那就需要指定扩张半径的值为
15px（10px+5px）。如果你愿意，甚至还可以在这些“边框”的底下再加一
层常规的投影：

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);

多重投影解决方案在绝大多数场合都可以很好地工作，但有一些注意
事项。
„ 投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会
受到 box-sizing 属性的影响。不过，你还是可以通过内边距或外边
距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要
占据的空间。
„ 上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响
应鼠标事件，比如悬停或点击。如果这一点非常重要，你可以给
box-shadow 属性加上 inset 关键字，来使投影绘制在元素的内圈。 图 2-6
请注意，此时你需要增加额外的内边距来腾出足够的空隙。 使用 box-shadow 来模拟双层外框

试一试 play.csssecrets.io/multiple-borders

outline 方案

在某些情况下，你可能只需要两层边框，那就可以先设置一层常规边
框，再加上 outline（描边）属性来产生外层的边框。这种方法的一大优
点在于边框样式十分灵活，不像上面的 box-shadow 方案只能模拟实线边框
（假设我们需要产生虚线边框效果，box-shadow 就没辙了）。如果要得到图 图 2-7
2-6 的效果，代码可以这样写： 在这些“外框”下再添加一层真
实的投影效果

2 多重边框 21

඀ࠡ JOEC