CSS3边框不透明度？
有没有一种简单的CSS方法可以使元素的边框变成半透明的：
border-opacity:0.7;
？
如果没有，有没有人有一个想法，我怎么可以这样做，而不使用图像？
不幸的是， 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在评论中的建议），以确保边框保持透明，即使应用了纯色背景。
这很容易，使用0偏移量的实心阴影：
#foo {
border-radius: 1px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
}
此外，如果您为元素设置边框半径，则会为您提供相当圆形的边框
jsFiddle演示
正如其他人所提到的那样：CSS-3说您可以使用rgba(...)语法来指定具有不透明度（alpha）值的边框颜色。
这里有一个简单的例子，如果你想检查它。
它适用于Safari和Chrome（可能适用于所有Webkit浏览器）。
它适用于Firefox
我怀疑它在IE中的作用，但我怀疑有一些过滤器或行为会使它工作。
还有这个stackoverflow的帖子，其中提出了一些其他的问题 - 即边框渲染任何你指定的背景颜色（或背景图像）的顶部; 因此在很多情况下限制了边界阿尔法的有效性。
链接地址: http://www.djcxy.com/p/40501.html上一篇: CSS3 Border Opacity?