如果你用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验证器/直接输入。

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

由于这个答案是谷歌结果的顶部，所以决定为像我这样的新手发布一个更新(2021年)的答案。

你可以使用rgba颜色设置边框不透明度。

border:2px solid rgba(232, 69, 69,.5); /* notice the .5 */

参见示例提琴在这里- http://jsfiddle.net/joshdane/74pybasm/33/

你可以使用它，享受它。

有一些讨论说旧的浏览器不支持rgba，但大多数人不再使用旧的浏览器了。如果您只是在学习，不要担心支持旧的浏览器。

*据我所知，没有什么我通常在这种情况下是创建一个块下面与更大的大小((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年前的一个很好的例子。

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

正如其他人所提到的，CSS3支持rgba(…)语法来指定带有不透明度(alpha)值的边框颜色。

这里有一个快速的JSFiddle演示，如果你想检查它。

它适用于Safari和Chrome(可能适用于所有webkit浏览器)。 它可以在Firefox中运行 我怀疑它在IE中是否能正常工作，但我怀疑有一些过滤器或行为可以使它工作。

还有CSS RGBA边框/背景alpha double，这表明了一些其他问题——即，边框呈现在您指定的任何背景颜色(或背景图像)之上;因此在许多情况下限制了边界alpha的有用性。

试试这个:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

这里是我们神奇的CSS..

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

点击这里查看演示。