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

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

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

jsFiddle演示

你也可以考虑其他的边框样式(虚线，虚线)来让边框部分完全透明:

http://jsfiddle.net/c1rvp3ga

身体{ 背景:url (http://i.imgur.com/pr86mh.jpg); ｝ # foo { 边框:5px虚线#b00; 背景:# ddd; background-clip: padding-box; 填充:8 px; 宽度:100 px; 保证金:30 px; ｝ <p id=foo>一些内容</p>

不幸的是，不透明属性使得整个元素(包括任何文本)都是半透明的。使边框半透明的最好方法是使用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;在上面的例子中，确保即使应用了纯色背景色，边界仍然是透明的。

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

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

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

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

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

jsFiddle演示

在这里稍微跳出框框思考一下:如果您正在使用SVG基本形状，您可以使用笔画、笔画宽度(浏览器支持> 97%)和笔画不透明度(浏览器支持> 99%)的组合来完成基本上与OP要求的相同的事情。

例如，这样的声明:

circle {
    stroke: blue;
    stroke-width: 5px;
    stroke-opacity: 0.4
}

将在<circle>的周长添加一个半透明的蓝色晕，填充#000。

这个JSFiddle提供了几个SVG基本形状的演示。小提琴使用红色填充和蓝色描边来突出描边和边框之间的主要区别-一半的描边宽度在基本形状的周长内。

这就给出了一个“双边框”外观(从外部到每个基本形状的中心:蓝色->(蓝色+红色=紫色)->红色)，这是不可能仅用CSS边框实现的(但边框+轮廓可以-参见上面的JSFiddle，使用<div>的例子)，并且很难实现(在径向基本形状的情况下)用径向梯度()。