【发布时间】：2011-06-28 00:59:17
【问题描述】：
你会如何在 CSS 中使用不透明度来制作边框？ RGBA 颜色不适合我...
A JSFiddle is self explaining.
边框有暗角，元素的背景在它后面可见，而不是后面的其他元素可见。
谢谢。
【问题讨论】：
【发布时间】：2011-06-28 00:59:17
【问题描述】：
可能有更好的方法，但这可行：
基本上，只需使用包装器div 并将rgba 设置为背景。
HTML：
<div id="boxOuter">
<div id="box">THANK YOU!</div>
</div>
CSS：
#box{
background-color:#ccc;font-weight:bold;
text-align:center;
line-height:100px;
height:100px;
vertical-align:middle;
font-size:20px;
}
#boxOuter {
background: rgba(0,0,0,0.5); width:300px; padding: 10px;
margin-left:25px;
}
阅读该答案的 cmets 以了解如何使此方法 (rgba) 适用于旧版浏览器。
一种不使用包装器的方法：
使用outline而不是border，看起来可以接受：
outline: 10px solid rgba(0,0,0,0.5)
Live Demo（是你的准确密码，只改了一个字）
（我这里根本不考虑 IE）
查看这篇文章：
http://css-tricks.com/transparent-borders-with-background-clip/
【讨论】：
-
现在看看是否有办法在没有包装器的情况下做到这一点
div.. :) -
效果很好，谢谢！我认为没有“无包装”的方式，但请继续尝试！
-
使用包装器
div方法的一个好处是您可以让它在旧版浏览器中工作。有关跨浏览器 rgba 背景，请参阅我的 a previous answer。 -
Chris Coyer 对此发表了精彩的article。我建议你检查一下。
-
@Connor Montgomery：谢谢，Coyier 的那篇文章读起来不错。我很高兴看到
If you'd more complete browser compatibility, you can always go with the double-div method.- 这意味着我在几分钟内给出的答案仍然是适用的建议。我在我的回答中添加了该文章的链接。
我认为第一个答案是最好的，尽管您现在可以在边框中使用图像，尝试使用具有透明度的 png 图像（通过 photoshop）使用边框图像属性，使用它的方法有很多，您可能会找到另一种样式你更喜欢研究。
【讨论】：