CSS揭秘:背景与边框（1）~半透明边框

最近在阅读《CSS揭密》一书，这段时间会将学习过的内容自己简单纪录一下，只为了加深一下子自己的记忆，方便学习，大家感兴趣的可以去看一下这本书。

半透明边框

背景知识
rgba()、hsla()颜色

RGBA

说明：
RGBA(R,G,B,A)
取值：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度,取值0~1之间。
RGBA记法

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理

HSLA

说明：
HSLA(H,S,L,A)

取值：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%

A：Alpha透明度。取值0~1之间。

说明：
HSL记法

此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。

兼容性：
浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

难题

半透明颜色是2009年发生的一场重大变革。从那次之后，人们可以在挖网页设计中使用它们，但是为了尝鲜还需要付出额外的代价，比如我们要做好回退，加载shim脚本，甚至在IE下还需要用到滤镜来hack。尽管半透明颜色很受欢迎，但人们对它的使用基本上还是集中在背景上。这其中有一些原因。

• 一些早期的尝鲜者并没有意识到这些新的颜色格式也是真正的颜色，与#ff0066和orange一样；而是把他们当做图片，只在背景中使用。
• 针对背景提供回退方案要比其他属性容易的多。举例来说，如果要为半透明背景色提供回退方案，可能只需要准备一张单像素的半透明图片就行了。对于其他属性来说，只能回退到一个实色。
• 在其他属性（比如边框）中使用半透明颜色并没有想象中那么容易。

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

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

但是此时的结果（图1）却让你奇怪，我么你设置的边框去哪儿了啊？而且如果使用半透明颜色都不能实现半透明边框，那我们还有什么办法？

解决方案

尽管看起来并不是那么回事，但我们的边框是真是存在的。因为在默认情况下，背景会延伸到边框所在区域的下层。这一点很容易验证，为一个有背景的元素应用一道虚线边框，就可以看出来（图2）。即使使用的是不透明的实色边框，这个事实也是存在的。

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

border:10px dashed  red;
background:white;
background-clip: padding-box;

此时我们就可以看到需要的结果了（图3）。