Page 51 - css揭秘
P. 51
试一试 play.csssecrets.io/translucent-borders
CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范
图 2-4
用 background-clip 来修复这个
问题
2 多重边框
背景知识
box-shadow 的基本用法
难题
回首往事，当背景与边框（第三版）（http://w3.org/TR/css3-background）
还在草案阶段时，CSS 工作组内部有过很多讨论，关于是否应该允许多重边
框，就像多重背景那样。不幸的是，当时一致认为这个特性并没有足够多的
使用场景，而且网页开发者还可以使用 border-image 来达到相同的效果。
然而工作组忽略了一点：我们通常希望在 CSS 代码层面以更灵活的方式来
调整边框样式。因此，网页开发者们最终不得不折腾出各种丑陋的 hack，比
如使用多个元素来模拟多重边框。不过，我们还有更好的办法来解决这个难
题，并不需要添加无用的额外元素来污染我们的结构。
box-shadow 方案
目前为止，我们大多数人可能已经用过（或滥用过）box-shadow 来生
成投影。不太为人所知的是，它还接受第四个参数（称作“扩张半径”），通
过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加
图 2-5 上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线
用 box-shadow 来模拟外框 边框（参见图 2-5）：
20 第 2 章 背景与边框
ࠡ JOEC
