[CSS揭秘]半透明边框

技巧：实现一个半透明的边框

预备知识 background-clip

background-clip 设置元素背景是否延伸到边框下面，如果没有设置背景颜色或者图片，那么这个属性只有在边框设置为透明或者半透明时才能看到视觉效果。否则这个属性造成的样式变化会被元素边框所覆盖。

默认值为 border-box 没有继承性，也不适用于CSS动画。取值范围 border-box; padding-box; content-box;

浏览器支持

android4.3及以下，不支持background-size

在safari浏览器上支持 -webkit-background-clip: text

 

默认情况下，一个容器的背景会延伸到边框所在的区域下层。通过background-clip属性可以调整背景的侵入范围。

border: 10px hsla(0,0%,100%,.5);

background: #fff;

background-clip: padding-box;

 

实现一个半透明边框

 

参考案例地址：

play.csssecrets.io/translucent-borders