其他答案涉及边界不透明问题的技术方面，而我想提出一个hack(纯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;
}

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

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

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

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

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

结果是，

值错误:border值太多或值不被识别: 1px固态rgba(255,0,0,0.5)

不幸的是，alpha值(rgb末尾的字母“a”)目前还不被W3C接受为边界颜色值的一部分。我想知道为什么它没有标准化，因为它可以在所有浏览器中工作。唯一的问题是您是要坚持W3C标准，还是要撇开它，在CSS中创建一些东西。

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

使用验证器检查你的工作总是一个好主意，当你在数小时的编码工作后斗鸡眼时，它真的有助于发现代码中小的甚至大的错误。

这很简单，使用一个0偏移量的实体阴影:

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

此外，如果您为元素设置一个边界半径，它会为您提供非常圆润的边界

jsFiddle演示

在某些情况下，另一种可行的解决方案是:将边框样式改为虚线样式。

在前景色和背景色之间有交替的像素组与连续的部分透明像素线是不同的。另一方面，这大大减少了对CSS的要求，而且在不需要任何特定于浏览器的指令的情况下，它在每个浏览器之间都更加兼容。

不幸的是，不透明属性使得整个元素(包括任何文本)都是半透明的。使边框半透明的最好方法是使用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的非常老的浏览器(IE8及更老版本)，解决方案是提供两个边界声明。第一个是假的不透明，第二个是真的。如果浏览器有能力，它将使用第二种，如果没有，它将使用第一种。

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;在上面的例子中，确保即使应用了纯色背景色，边界仍然是透明的。

其他答案涉及边界不透明问题的技术方面，而我想提出一个hack(纯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;
}