《css揭秘》一直很期待这本书，终于入手了。果断的要试一试书中的例子。
第一个例子是 半透明边框
首先看看我做出来的样子。个人觉得半透明边框很实用，可以用在书籍，电影资料的展示上。
半透明边框
实现起来也不难。
其中关键是要了解 CSS3 background-clip 属性
background-clip 有3个值
- border-box 背景会延伸到边框区域的下层。默认值。
- padding-box 背景绘制在边框内部，不会超出边框。
- content-box 背景绘制在内容方框内。
上栗子：
当background-clip: border-box;时，会显示成下图的样子，实色的虚线边框看起来更明显。下层的白色背景会从虚线的空隙中露出来。如果边框是透明的，就会隐藏在白色背景中，看不到了。这不是我们想要的。
background-clip: border-box;
css 代码
background-clip: border-box;
border： 20px dashed #58a;
background: #fff;
当background-clip: padding-box;时，白色背景层完全在虚线边框的里面，这个看起来正适合。
background-clip: padding-box;
css 代码
background-clip: padding-box;
border： 20px dashed #58a;
background: #fff;
当background-clip: content-box;时，白色背景被切掉了，产生了空隙。
background-clip: content-box;
css 代码
background-clip: content-box;
border： 20px dashed #58a;
background: #fff;
从上面的例子看，用background-clip: padding; 就可以实现。
只要把实色虚线边框改成透明实线边框。
书中用的是 hsla()来实现透明颜色，没看这本书之前我还真的对hsla不太了解
查了才知道
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
透明颜色可以这样写：
hsla(0,0%,100%,.5);
前两个值，写什么都无所谓，因为亮度100%
添加到代码片段里
css 代码
background-clip: padding-box;
border： 20px solid hsla(0,0%,100%,.5);
background: #fff;
半透明边框实现了
image
暗色的半透明边框感觉酷酷的
只要把 hsla() 的亮度值改为0%。hsla(0,0%,0%,.5)
image
以上就是《css揭秘》半透明边框实例
ps:图书封面图，来自网络。
