CSS半透明边框

发表于 分类于

CSS半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框上透上来。如果我们这样写：

HTML 部分

1
2
3
<body>
    <div class="btn">123456</div>
</body>
1
2
3
4
5
6
7
body{
    background: yellow;
}
.btn{
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background: white;
}

打开浏览器会发现不起作用，因为 background 在 Box Model 中，它是布满整个元素的盒子区域的，并不是从 padding 内部开始（也就是说从 border 就开始啦），但有一点需要注意，background-color 是从元素的边框左上角起到右下角止，而 background-image 却不一样，他是从 padding 边缘的左上角起而到 border 的右下角边缘止。

所以我们需要 background-clip 这个属性，设置元素的背景（背景图片或颜色）是否延伸到边框下面。

MDN: background-clip

1
2
3
4
5
6
7
8
body{
    background: yellow;
}
.btn{
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background: white;
    background-clip: padding-box;
}

参考

奇妙的 background-clip: text