半透明边框

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

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

一开始尝试的结果

默认情况下，背景会延伸到边框所在区域的下层，所以我们所做的事情只是让自己的纯白色背景透了出来。

解决方案
从背景与边框（第三版）开始，我们可以使用background-clip属性来调整上述默认行为所带来的不便。这个属性的初始值是border-box，意味着背景会被元素的border box（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要把值改为padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

完美！