有一个直接的CSS方法，使一个元素的边界半透明的东西像这样?
border-opacity: 0.7;
如果没有，有没有人知道我如何在不使用图像的情况下做到这一点?
当前回答
你也可以考虑其他的边框样式(虚线，虚线)来让边框部分完全透明:
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>
其他回答
由于这个答案是谷歌结果的顶部，所以决定为像我这样的新手发布一个更新(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>
在某些情况下，另一种可行的解决方案是:将边框样式改为虚线样式。
在前景色和背景色之间有交替的像素组与连续的部分透明像素线是不同的。另一方面，这大大减少了对CSS的要求，而且在不需要任何特定于浏览器的指令的情况下，它在每个浏览器之间都更加兼容。
其他答案涉及边界不透明问题的技术方面，而我想提出一个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;
}
这很简单，使用一个0偏移量的实体阴影:
#foo {
border-radius: 1px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
}
此外，如果您为元素设置一个边界半径，它会为您提供非常圆润的边界
jsFiddle演示
