半透明边框

 相信大家以前都是用过CSS的半透明颜色，比如rgba()和hsla()。但在一些属性（比如边框）中使用半透明颜色并没有想象中那么容易。我们接下来会看的：

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

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

结果如图所示：

这个结果可能会令你摸不到头脑。我们的边框去哪儿了呢？而且我们连使用半透明颜色都不能实现半透明边框，那我们还有什么办法呢？

解决方案：

尽管看起来并不像那么回事儿，但我们的边框仍旧存在。默认的情况下，背景会延伸到边框所在的区域下层。

我们可以通过background-clip属性来调整上述默认行为所带来的不便。这个属性的初始值为border-box，意味着背景会被元素的border box（边框的外延框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为padding-box,这样浏览器就会用内边距的外延来把背景裁切掉。

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

可以看到完美的结果，如下：