Page 50 - css揭秘
P. 50
图 2-1
24ways.org 早在 2008 年就开始
在网页设计中使用半透明颜色了，
是最早尝鲜的网站之一。只不过
他们也大多是在背景中使用（由
Tim Van Damme 设计）
图 2-2
解决方案 为了实现半透明边框，我们最开
始尝试的结果
尽管看起来并不像那么回事，但我们的边框其实是存在的。默认情况下，
背景会延伸到边框所在的区域下层。这一点很容易验证，给一个有背景的元
素应用一道老土的虚线边框，就可以看出来（参见图 2-3）。即使你使用的是
不透明的实色边框，这个事实也不会有任何改变。只不过在上面的例子中，
这个特性完全打破了我们的设计意图。我们所做的事情并没有让 body 的背景
从半透明白色边框处透上来，而是在半透明白色边框处透出了这个容器自己
的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样。
在 CSS 2.1 中，这就是背景的工作原理。我们只能接受它并且向前看。
谢天谢地，从背景与边框（第三版）（http://w3.org/TR/css3-background）开
始，我们可以通过 background-clip 属性来调整上述默认行为所带来的不 图 2-3
便。这个属性的初始值是 border-box，意味着背景会被元素的 border box 默认状态下，背景会延伸到边框
的区域下层
（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做
的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背
景裁切掉。
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
我们在图 2-4 中可以看到这个完美的结果。
1 半透明边框 19
ࠡ JOEC
