可以在CSS中设置边框不透明度吗？

是否有一种简单的CSS方法可以使像这样的元素的边界半透明？

border-opacity: 0.7;

如果没有，是否有人知道我不使用图像怎么办？

不幸的是，该opacity元素使整个元素（包括任何文本）都是半透明的。使边框半透明的最佳方法是使用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如果这是整个声明，则某些浏览器将无法理解该格式，并且根本不会显示任何边框。解决方案是提供两个边界声明。第一个具有假的不透明性，第二个具有实际的不透明性。如果浏览器有能力，它将使用第二个浏览器，否则将使用第一个。

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;” 此答案（根据注释中SooDesuNe的建议），以确保即使应用纯色背景，边框也保持透明。

很简单，使用偏移量为0的纯色阴影：

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

另外，如果您为元素设置了边框半径，它会为您提供漂亮的圆角边框

jsFiddle演示

正如其他人提到的那样：CSS-3说，您可以使用rgba(...)语法来指定具有不透明度（alpha）值的边框颜色。

如果您想检查一下，这是一个简单的例子。

• 它适用于Safari和Chrome（可能适用于所有Webkit浏览器）。

• 可以在Firefox中使用

• 我怀疑它在IE中根本无法工作，但我怀疑有一些过滤器或行为可以使它工作。

还有一个stackoverflow帖子，它提出了其他一些问题-即，边框会在您指定的任何背景色（或背景图片）上方显示；因此在许多情况下限制了边界alpha的用途。

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

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

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

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

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

结果是

值错误：边界太多值或无法识别的值：1px固体rgba（255,0,0,0.5）

不幸的是，W3C尚未接受Alpha值（“ rgb”末尾的字母“ a”）作为边框颜色值的一部分。我确实想知道为什么它不是标准化的，因为它在所有浏览器中都能工作。唯一的障碍是您是要坚持W3C标准还是要脱离CSS在CSS中创建内容。

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

使用验证器来检查您的工作始终是一个好主意，这确实有助于在编码工作数小时后不知所措地发现编码中的小错误甚至大错误。

*据我所知，在这种情况下我通常不做的是在下面创建一个更大的（（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年前的例子。

作为替代方案，可以在工作某些情况：改变border-style到dotted。

在前景色和背景色之间交替排列的像素组与部分透明像素的连续线不同。另一方面，这需要更少的CSS，并且不需要任何特定于浏览器的指令就可以在每个浏览器中更兼容。

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

不，没有办法仅使用css设置边框的不透明度。

例如，如果您不知道颜色，则无法仅通过使用来更改边框的不透明度rgba()。

尝试这个：

<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;
}

在此处查看演示。