1.知识点
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之间。
2.html代码：<div class="box1"></div>
3.css代码：
body{
background: red;
??????}
???.box1{
width: 30px;
height: 30px;
background: white;
border: 10px solid hsla(0,0%,100%,.5);
}
4.运行效果： ，这样看起来并没有边框，好像全部是content，但其实他是有边框的， 。出现这样的原因是什么？
原因：body 的背景没有从半透明白色边框处透上来， 而是在半透明白色边框处透出了这个容器自己的纯白实色背景， 这实际上得到的效果跟纯白实色的边框看起来完全一样。默认状态下，背景会延伸到边框的区域下层。
5.解决办法：在css代码中加一句：background-clip: padding-box;
6.实现效果： ?
7.补充知识：background-clip 属性规定背景的绘制区域。
border-box：背景被裁剪到边框盒；
padding-box：背景被裁剪到内边距框；
content-box：背景被裁剪到内容框。
《css揭秘》学习（一）半透明边框
原文地址：http://www.cnblogs.com/cxq0809/p/7452915.html