《css揭秘》实例练习--半透明边框

《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:图书封面图，来自网络。