Page 49 - css揭秘
P. 49
1 半透明边框
背景知识
RGBA/HSLA 颜色
难题
相信你以前肯定尝试过 CSS 中的半透明颜色，比如 rgba() 和 hsla()。
半透明颜色是 2009 年发生的一场重大变革。从那以后，我们终于可以在网
页设计中使用它们了，但是为了尝鲜还需要付出额外的代价。比如说，我
们需要做好回退，加载 shim 脚本，甚至在 IE 下还需要用到恶心的滤镜来
hack。尽管半透明颜色很受欢迎，但人们对它的使用基本上还是集中在背景
上的。这里面有一些原因。
一些早期尝鲜者并没有意识到这些新的颜色格式也是真正的颜色，
与 #ff0066 和 orange 一样；而是把它们当作图片，只在背景
中使用。
针对背景提供回退方案要比其他属性容易得多。举例来说，如果要
为半透明背景色提供回退方案，可能只需要准备一张单像素的半透
明图片就行了。而对其他属性来说，只能回退到一个实色。
在其他属性（比如边框）中使用半透明颜色并没有想像中那么容易。
我们接下来就会看到。
假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body
的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：
border: 10px solid hsla(0,0%,100%,.5);
background: white;
除非你对背景和边框的工作原理有着非常好的理解，否则这个结果（参
见图 2-2）可能会令你摸不着头脑。我们的边框去哪儿了啊？而且如果我们
连使用半透明颜色都不能实现半透明边框，那我们还有什么办法？！
18 第 2 章 背景与边框
ࠡ JOEC
