可以在CSS中设置边框不透明度吗？

*据我所知，在这种情况下我通常不做的是在下面创建一个更大的（（bordersize * 2）+ originalsize）块，并使用

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

这是一个例子

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

更新：

这个答案已经过时了，因为毕竟这个问题已经超过8年了。今天，所有最新的浏览器都支持rgba，框阴影等。但这是8年前的例子。

作为在某些情况下可能有效的替代解决方案：将更改为。border-styledotted

在前景色和背景色之间交替排列的像素组与部分透明像素的连续线不同。另一方面，这需要更少的CSS，并且在没有任何特定于浏览器的指令的情况下，它在每个浏览器中的兼容性都更高。

正如其他人提到的那样：CSS-3说，您可以使用rgba(...)语法来指定具有不透明度（alpha）值的边框颜色。

如果您想检查一下，这是一个简单的例子。

• 它适用于Safari和Chrome（可能适用于所有Webkit浏览器）。

• 可以在Firefox中使用

• 我怀疑它在IE中根本无法工作，但我怀疑有一些过滤器或行为可以使它工作。

还有一个stackoverflow帖子，它提出了其他一些问题-即，边框会在您指定的任何背景色（或背景图片）上方显示；因此在许多情况下限制了边界alpha的用途。

如果使用W3C验证器检查CSS编码，即使您的CSS代码在主要浏览器中都可以使用，您也会看到CSS代码是否可以接受。

如上所述，通过CSS创建透明边框，

border: 1px solid rgba(255, 0, 0, .5);

W3C标准不接受，甚至CSS3也不接受。我将直接输入验证器与以下CSS代码结合使用，

.test { border: 1px solid rgba(255, 0, 0, .5); }

结果是

值错误：边框太多值或无法识别的值：1px固体rgba（255,0,0,0.5）

不幸的是，W3C尚未接受Alpha值（“ rgb”末尾的字母“ a”）作为边框颜色值的一部分。我确实想知道为什么它不是标准化的，因为它在所有浏览器中都能工作。唯一的障碍是您是要坚持W3C标准还是要脱离CSS在CSS中创建内容。

要使用W3C在线CSS验证器/直接输入。

使用验证器来检查您的工作始终是一个好主意，当您经过数小时的编码工作后不知所措时，它确实有助于发现编码中的小错误甚至大错误。

很简单，使用偏移量为0的纯色阴影：

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

另外，如果您为元素设置了边框半径，它会为您提供漂亮的圆角边框

jsFiddle演示

其他答案涉及边界不透明问题的技术方面，而我想提出一个技巧（仅适用于纯CSS和HTML）。基本上创建一个容器div，它具有一个边框div，然后是内容div。

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

然后是CSS ：（将内容边框设置为none，注意定位，以便考虑边框的厚度）

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}