【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;
   ...                        //此处省略不重要的代码！！！
}

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