背景与边框--半透明边框

半透明边框

CSS中的半透明颜色，如rgba()，hsla()

尝鲜新特性时，需要做好回退，加载shim脚本，在IE下需要用到恶心的滤镜来hack

目标1：

给一个容器设置一层白色背景和一道半透明白色边框，body的背景从它的半透明边框透上来

尝试：

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

效果如下：

尝试半透明白色边框效果

并没有实现预期效果.

尽管看起来并不像，但边框实际是存在的。默认情况下，背景会延伸到边框所在区域下层。验证：给一个有背景的元素应用一道虚线边框即可看出来，如下。所做的事情并未让body的背景从半透明白色边框处透上俩，而是在半透明白色边框处透出了这个容器自己的纯白实色背景，实际得到的效果跟纯白色边框看起来完全一样。

验证边框存在

这是CSS2.1中背景的工作原理。所以只能接受它并向前看，从CSS3开始，可以通过background-clip属性来调整上述默认行为所带来的不变，属性初始值是border-box，意味着背景会被元素的border box（边框的外边框裁切掉）。如果不希望背景侵入边框的所在范围，就需要把它设为padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

<div style="
background: url('http://csssecrets.io/images/stone-art.jpg');
background-size: cover;
">
<div style="
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
color: black;
">
</div>
</div>

效果如下：

完美的效果