第2章 背景与边框

1 半透明边框

难题

相信你以前肯定尝试过CSS中的半透明颜色，比如rgba()和hsla()。半透明颜色是2009年发生的一场重大变革。从那以后，我们终于可以在网页设计中使用它们了，但是为了尝鲜还需要付出额外的代价。比如说，我们需要做好回退，加载shim脚本，甚至在IE下还需要用到恶心的滤镜来hack。尽管半透明颜色很受欢迎，但人们对它的使用基本上还是集中在背景上的。这里面有一些原因。

■一些早期尝鲜者并没有意识到这些新的颜色格式也是真正的颜色，与#ff0066和orange一样；而是把它们当作图片，只在背景中使用。

■针对背景提供回退方案要比其他属性容易得多。举例来说，如果要为半透明背景色提供回退方案，可能只需要准备一张单像素的半透明图片就行了。而对其他属性来说，只能回退到一个实色。

■在其他属性（比如边框）中使用半透明颜色并没有想像中那么容易。我们接下来就会看到。

假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：

border:10px solid hsla(0,0%,100%,.5);
background:white;

除非你对背景和边框的工作原理有着非常好的理解，否则这个结果（参见图2-2）可能会令你摸不着头脑。我们的边框去哪儿了啊？而且如果我们连使用半透明颜色都不能实现半透明边框，那我们还有什么办法？！

图2-1

24ways.org早在2008年就开始在网页设计中使用半透明颜色了，是最早尝鲜的网站之一。只不过他们也大多是在背景中使用（由Tim Van Damme设计）

解决方案

尽管看起来并不像那么回事，但我们的边框其实是存在的。默认情况下，背景会延伸到边框所在的区域下层。这一点很容易验证，给一个有背景的元素应用一道老土的虚线边框，就可以看出来（参见图2-3）。即使你使用的是不透明的实色边框，这个事实也不会有任何改变。只不过在上面的例子中，这个特性完全打破了我们的设计意图。我们所做的事情并没有让body的背景从半透明白色边框处透上来，而是在半透明白色边框处透出了这个容器自己的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样。

在CSS 2.1中，这就是背景的工作原理。我们只能接受它并且向前看。谢天谢地，从背景与边框（第三版）（http://w3.org/TR/css3-background）开始，我们可以通过background-clip属性来调整上述默认行为所带来的不便。这个属性的初始值是border-box，意味着背景会被元素的border box（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

border:10px solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;

我们在图2-4中可以看到这个完美的结果。

图2-2

为了实现半透明边框，我们最开始尝试的结果

图2-3

默认状态下，背景会延伸到边框的区域下层

图2-4

用background-clip来修复这个问题

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

相关规范