css - 你能在 CSS 中设置边框不透明度吗？

Question

是否有一种直接的 CSS 方法可以使元素的边框像这样半透明？

border-opacity: 0.7;

如果没有，有没有人知道我如何在不使用图像的情况下做到这一点？

Answer 1

不幸的是，opacity 属性使整个元素(包括任何文本)成为半透明。使边框半透明的最佳方法是使用 rgba 颜色格式。例如，这将给出一个不透明度为 50% 的红色边框:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

对于不支持 rgba 的极旧浏览器(IE8 及更早版本)，解决方案是提供两个边框声明。第一个是假的不透明度，第二个是真实的。如果浏览器有能力，它将使用第二个，如果没有，它将使用第一个。

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

第一个边框声明的颜色相当于白色背景上 50% 不透明的红色边框(尽管边框下的任何图形都不会渗出)。

我在上面的示例中添加了 background-clip: padding-box; 以确保边框保持透明，即使应用纯色背景也是如此。