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

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

先来举一个例子：

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

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

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

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

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 即可。

更改之后，如下图：

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

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