不幸的是，该opacity元素使整个元素（包括任何文本）都是半透明的。使边框半透明的最佳方法是使用rgba颜色格式。例如，这将给出不透明度为50％的红色边框：
div {
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-@R_303_2419@; /* for Safari */
background-clip: padding-@R_303_2419@; /* 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-@R_303_2419@; /* for Safari */
background-clip: padding-@R_303_2419@; /* for IE9+, Firefox 4+, Opera, Chrome */
}
第一个边框声明将与白色背景上50％不透明的红色边框具有相同的颜色（尽管边框下的任何图形都不会渗出）。
我添加了“ background-clip：padding-@R_303_2419@;”此答案（根据注释中SooDesuNe的建议），以确保即使应用纯色背景，边框也保持透明。
602392714
清零编程群