不透明的边界？

Question

你如何在CSS中使用不透明边框？ RGBA颜色对我不起作用......

A JSFiddle is self explaining.

边框中有暗角，背后可见元素的背景，而不是背后的其他元素。

谢谢。

Answer 1

可能有更好的方法，但这有效：

Live Demo

基本上，只需使用包含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;
}

阅读此答案的评论，了解如何使此方法（rgba）与旧浏览器一起使用。

---

不使用包装器的方法：

使用outline代替border，看起来可以接受：

outline: 10px solid rgba(0,0,0,0.5)

Live Demo（这是您确切的代码，更改了一个单词）

（我这里没有考虑IE）

---

查看这篇文章：

http://css-tricks.com/transparent-borders-with-background-clip/

Answer 2

我认为第一个答案是最好的虽然你现在可以在边框中使用图像，尝试使用透明的png图像（通过photoshop）使用border-image属性，有很多方法可以使用它你可能会找到另一种风格你更喜欢研究。

http://www.css3.info/preview/border-image/