CSS3边框不透明度？

Question

是否有直接的CSS方法使元素的边框半透明，如：

border-opacity:0.7;

如果没有，有没有人知道如何在不使用图像的情况下这样做？

Answer 1

不幸的是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在评论中的建议，确保边框保持透明，即使应用了纯色背景。

Answer 2

这很简单，使用0偏移的实体阴影：

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

此外，如果您为该元素设置border-radius，它会为您提供相当圆的边框

jsFiddle Demo

Answer 3

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

here's a quick example如果您想查看它。

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

• 适用于Firefox

• 我怀疑它在IE中是否有效，但我怀疑有一些过滤器或行为可以使它工作。

还有this stackoverflow post，它提出了一些其他问题 - 即边框呈现在您指定的任何背景颜色（或背景图像）的顶部;因此在许多情况下限制了边界alpha的有用性。

Answer 4

*据我所知，在这种情况下，我没有正常做的是在下面用更大的尺寸创建一个块（（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年多以前的一个很好的例子。

Answer 5

如果您使用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 solid rgba（255,0,0,0.5）

不幸的是，W3C不接受alpha值（“rgb”末尾的字母“a”）作为边框颜色值的一部分。我不知道它为什么不标准化，因为它适用于所有浏览器。唯一的障碍是你是否要坚持使用W3C标准，或者是否要在CSS中创建一些东西。

使用W3C online CSS validator / Direct Input。

使用验证器来检查您的工作总是一个好主意，它可以帮助您在编码工作数小时后进行编码时发现编码中的小错误甚至是大错误。

Answer 6

作为可能在某些案例中工作的替代解决方案：将border-style更改为dotted。

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

Answer 7

试试这个：

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

点击此处Demo。

Answer 8

其他答案涉及边界不透明度问题的技术方面，而我想提出一个黑客（纯CSS和HTML）。基本上创建一个容器div，有一个border div，然后是内容div。

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

然后是CSS :(设置内容边框为无，请注意定位边框厚度）

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

Answer 9

否，无法仅设置CSS边框的不透明度。

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