首页 半透明边框与background-clip

半透明边框与background-clip

子恒 2017-8-10 2 773

假设我们想给一个 div 设置一层白色背景和一道半透明白色边框, body的背景会从它的半透明边框中透上来。

效果如图:

1.png

我们一开始的尝试可能是这样的:

background: #fff;
border: 50px solid rgba(255, 255, 255, .5);


写完后, 一看浏览器, 怎么回事?我的边框呢?

2.png

这个结果可能会令你摸不着头脑, 要是使用半透明颜色都实现不了半透明边框,那还有什么办法呢?

原因

尽管现在看起来像没有边框, 但那50px 的边框是实际存在的。因为默认情况下,背景是会延伸到边框的外沿,且处于边框的下层。我们来验证一下:

将边框改变颜色,并设置为虚线

border: 50px dotted #000;



3.png

我们发现,白色背景位于黑色边框的下面, 知道这个原因之后,我们就可以想到, 如果将背景裁切到边框的内沿就可以实现我们要的效果了。

幸好 css 有这个属性 background-clip

background-clip  设置元素的背景(背景图片或颜色)是否延伸到边框下面。

语法


background-clip: border-box
background-clip: padding-box
background-clip: content-box
background-clip: inherit


border-box

    背景延伸到边框外沿(但是在边框之下)。

padding-box

    边框下面没有背景,即背景延伸到内边距外沿。

content-box

    背景裁剪到内容区 (content-box) 外沿。

---摘自MDN


于是我们设置background-clip: padding-box; 即可,最后的代码:


border: 50px solid rgba(255,255,255, .5);
background-color: #fff;
background-clip: padding-box;


1.png

#css#

打赏作者
打赏作者 打赏作者
免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
作者: 子恒 本文最后编辑于2017-8-10 11:26:27
子恒

I don't have any end of the Year Award

作者的微博

发表评论

评论列表:

undefined
2018-01-17 11:41
子古月恒
子恒
2018-01-18 11:32
@undefined:哈哈