可以在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如果这是整个声明，则某些浏览器将无法理解该格式，并且根本不会显示任何边框。解决方案是提供两个边界声明。第一个具有假的不透明性，第二个具有实际的不透明性。如果浏览器有能力，它将使用第二个浏览器，否则将使用第一个。

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;”此答案（根据注释中SooDesuNe的建议），以确保即使应用纯色背景，边框也保持透明。