有一个直接的CSS方法，使一个元素的边界半透明的东西像这样?
border-opacity: 0.7;
如果没有，有没有人知道我如何在不使用图像的情况下做到这一点?
当前回答
正如其他人所提到的，CSS3支持rgba(…)语法来指定带有不透明度(alpha)值的边框颜色。
这里有一个快速的JSFiddle演示，如果你想检查它。
它适用于Safari和Chrome(可能适用于所有webkit浏览器)。 它可以在Firefox中运行 我怀疑它在IE中是否能正常工作，但我怀疑有一些过滤器或行为可以使它工作。
还有CSS RGBA边框/背景alpha double，这表明了一些其他问题——即，边框呈现在您指定的任何背景颜色(或背景图像)之上;因此在许多情况下限制了边界alpha的有用性。
其他回答
正如其他人所提到的，CSS3支持rgba(…)语法来指定带有不透明度(alpha)值的边框颜色。
这里有一个快速的JSFiddle演示，如果你想检查它。
它适用于Safari和Chrome(可能适用于所有webkit浏览器)。 它可以在Firefox中运行 我怀疑它在IE中是否能正常工作，但我怀疑有一些过滤器或行为可以使它工作。
还有CSS RGBA边框/背景alpha double，这表明了一些其他问题——即，边框呈现在您指定的任何背景颜色(或背景图像)之上;因此在许多情况下限制了边界alpha的有用性。
这很简单，使用一个0偏移量的实体阴影:
#foo {
border-radius: 1px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
}
此外，如果您为元素设置一个边界半径，它会为您提供非常圆润的边界
jsFiddle演示
由于这个答案是谷歌结果的顶部，所以决定为像我这样的新手发布一个更新(2021年)的答案。
你可以使用rgba颜色设置边框不透明度。
border:2px solid rgba(232, 69, 69,.5); /* notice the .5 */
参见示例提琴在这里- http://jsfiddle.net/joshdane/74pybasm/33/
你可以使用它，享受它。
有一些讨论说旧的浏览器不支持rgba，但大多数人不再使用旧的浏览器了。如果您只是在学习，不要担心支持旧的浏览器。
你也可以考虑其他的边框样式(虚线，虚线)来让边框部分完全透明:
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;在上面的例子中，确保即使应用了纯色背景色，边界仍然是透明的。
