半透明边框与background-clip

一，半透明边框

前言：

已知，通过rgba与hsla颜色我们可以设置半透明的颜色，

现在我们想实现一个半透明的边框，例子如下：

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

 

会发现我们的边框不见了，我们不是使用了半透明颜色了吗，这是为什么呢？

答：尽管看上去没有边框实际上我们的边框是存在的。默认情况下背景（也就是例子中的白色盒子）会延伸到边框所在区域的下层。验证例子如下：

也就是说即使你用半透明颜色的边框也办法让背景（例子中绿色的背景）透出来，因为白色背景的盒子延伸到边框，所以看不出边框了。解决这个问题就需要我们使用 background-clip 属性。

 

background-clip 属性

通过background-clip可以解决上述问题。

作用： background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面

默认值：border-box 即背景延伸至边框外沿

值： padding-box 即背景延伸至内边距外沿

content-box 即背景延伸至内容外沿

 

padding-box 例子：

// 这个可以解决 半透明边框问题
 border: 10px solid hsla(0,0%,100%,.5); 
background: white; 
background-clip: padding-box ;

 

可以看到绿色的背景透露出来，半透明边框成功了。

 

content-box 例子：

border: 10px solid hsla(0,0%,100%,.5); 
background: white; padding: 30px; 
background-clip: content-box ;

 

可以看到白色盒子背景延伸到内容外沿（记得设置内边距）