《CSS揭秘》第二章 背景与边框>技巧一 半透明边框

本技巧主要知识点：
background-clip:border-box/padding-box;
需要的知识储备：RGBA/HSLA颜色

例子
想要的效果：边框半透明

尝试版本：

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

效果：

before.jpg

解决版本：

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

效果：

after.jpg

注：使用background-clip:border-box 的效果和before.jpg一样。

这就说明了，使用padding-box就是该div的背景不包括边框，而border-box就代表该div的背景侵入边框，会把边框的颜色覆盖。
另外，hsla(0,0%,100%,.5)代表白色半透明。