引言：相信你点进来，一定对这个话题感兴趣，那今天我们就来研究一下半透明边框！！！

先来举一个例子：

【CSS】background-clip属性解决background问题。_background

div{
   background-color:#fff;
   border:40px solid rgba(255,255,255,.5);
   ...                        //此处省略不重要的代码！！！
}

背景图片是​​#fff​​​白色，边框颜色是​​rgba(255,255,255,.5)​​ 白色半透明，但是为什么半透明边框没有显示那？

其实，透明边框代码起作用了！！

那么好，我们来换一个颜色，这样你就能够看出来！！！

【CSS】background-clip属性解决background问题。_前端_02

div{
   background-color:red;
   border:40px solid rgba(255,255,255,.5);
   ...                        //此处省略不重要的代码！！！
}

我把背景颜色换成了红色

wow！！！边框颜色变成了粉红色 是不是很神奇！！！

是不是背景颜色从半透明白色边框处透上来显示 粉红色 ？

答案是肯定的。

默认情况下，给Div设置背景颜色，背景会延伸到边框的区域（在下层）。

所以上边的现象很好解释了！！

如何解决？

从 ​​背景和边框 （第三版）​​​ 开始，我们可以通过​​background-clip​​ 属性来调整这个bug给我们带来的不便！！

​​background-clip​​​ 的默认初始值是​​border-box​​

意味着背景会被border box（边框的外延框）裁剪掉。

如果不希望背景入侵边框的区域，将​​background-clip​​​ 属性值设置为​​padding-box​​ 即可。

更改之后，如下图：

【CSS】background-clip属性解决background问题。_边框_03

div{
   background-color:red;
   border:40px solid rgba(255,255,255,.5);
   background-clip:padding-box;
   ...                        //此处省略不重要的代码！！！
}

此时，半透明边框清晰可见！！！