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

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

先来举一个例子:

【CSS】background-clip属性解决background问题。_第1张图片

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

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

其实,透明边框代码起作用了!!

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

【CSS】background-clip属性解决background问题。_第2张图片

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问题。_第3张图片

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

此时,半透明边框清晰可见!!!

你可能感兴趣的:(HTML/CSS)