CSS中是否可以设置边框不透明度？

Question

有没有一种直接的CSS方法可以使元素的边框半透明，类似于这样？

border-opacity: 0.7;

如果不行，有没有人有办法在不使用图像的情况下实现呢？

- mcbeav

---

似乎没有 border-bottom-color-opacity 属性。因此，如果您无法触及前端设置的颜色，并且只想为底部边框颜色应用不透明度，则会遇到困境... 此外，将不透明度添加到 currentColor 也不起作用。 - Avatar

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（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;，以确保即使应用了实心背景颜色，边框仍然保持透明。

- kingjeffrey

---

如果您想让边框内部的内容显示出来（而不是边框本身的背景颜色），您需要同时设置 background-clip:padding-box;。 - SooDesuNe

八位十六进制也可以使用！例如，#000000ff 是普通的黑色，而 #00000000 是透明的。最后两个字符在任何位置上的变化都会改变不透明度。 - Raphael Morgan

Answer 2

很简单，使用一个偏移量为0的实心阴影：

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

此外，如果你为元素设置了border-radius属性，它会给你漂亮的圆角边框。

jsFiddle演示

- Pedro L.

---

这将始终有效。感谢代码片段 :) 对于只想要一个或多个边框的所有人，您必须像这样更改前两个参数 box-shadow: -1px -1px 0px 0px rgba(0,0,0,0.1) 以实现例如 border-top。 - Thomas Richter

这个需要小心使用！box-shadow没有大小，可能会破坏你的布局，让你的边距不平衡！http://jsfiddle.net/bj81hew7/2/ - William

我的意思是，这很酷，但你让盒阴影半透明的方式对实际边框也起作用，所以我不知道这怎么回答问题。这只是一个不错的补充。 - Raphael Morgan

Answer 3

如其他人所提到的，CSS3支持使用rgba(...)语法来指定具有透明度（alpha值）的边框颜色。

这是一个快速的JSFiddle演示，如果您想要检查它。

• 它在Safari和Chrome中有效（可能在所有Webkit浏览器中有效）。

• 它在Firefox中有效。

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

还有CSS RGBA border / background alpha double，它提出了一些其他问题，即边框会在您指定的任何背景颜色（或背景图像）之上呈现，从而限制了边框透明度在许多情况下的实用性。

- Lee

---

使用background-clip: padding-box;可以解决边框问题（在该属性得到支持之前，您可以使用-webkit和-moz供应商扩展）。 - kingjeffrey

我已将此回答添加到您链接的问题中。 - kingjeffrey

Answer 4

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

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

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

这段CSS代码不符合W3C标准，即使是CSS3也不行。我使用了直接输入验证器来验证这段CSS代码：

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

结果是，

数值错误：边框值太多或不被识别：1像素实线rgba（255,0,0,0.5）

不幸的是，阿尔法值（“rgb”结尾处的字母“a”）目前尚未被W3C接受为边框颜色值的一部分。我真的想知道为什么它没有被标准化，因为它在所有浏览器中都可以工作。唯一的问题是，您是否想要坚持W3C标准还是离开它以创建CSS中的内容。

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

始终使用验证器检查您的工作是一个好主意，当您在编码工作几个小时后眼花缭乱时，它确实有助于发现编码中的小错误甚至大错误。

- Mark2090

---

这符合 W3C 标准，是验证器中的错误。请参见 此答案。使用验证器是一个好主意，但不要对一切都信任它。请注意，不需要在翻译中添加解释。 - BoltClock

Answer 5

据我所知，目前没有这样的功能。在这种情况下，通常我会创建一个更大的块（边框大小*2+原始大小），并使用透明度来隐藏它。

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

here is an example

#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年前的情况。

- Breezer

---

是的，那其实就是我最终做的事情，只是调整元素的位置真的很麻烦。 - mcbeav

可以做到，但是不会有广泛的跨浏览器支持。然而，支持在背景颜色上使用css透明度的浏览器很可能也支持使用rgba(...)来设置边框颜色。点击这里试一下。 - Lee

@Lee，IE支持“filter”不透明度，但不支持任何形式的rgba（直到IE9）。 - kingjeffrey

Answer 6

作为一种备选方案，可能在某些情况下有效：将border-style更改为dotted。

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

- Stephan Samuel

Answer 7

其他答案已经涉及到了边框透明度问题的技术方面，而我想提供一个纯CSS和HTML的hack方法。基本上创建一个容器div，其中包含一个边框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;
}

- RBk

Answer 8

这里有点突破常规的思考：如果你正在使用SVG基本形状，你可以使用stroke、stroke-width（浏览器支持率>97％）和stroke-opacity（浏览器支持率>99％）的组合来实现OP提出的几乎相同的功能。

例如，这个声明：

circle {
    stroke: blue;
    stroke-width: 5px;
    stroke-opacity: 0.4
}

将在一个填充为#000的<circle>周围添加一个半透明蓝色的光环。

这个JSFiddle提供了几个SVG基本形状的演示。该代码片段使用红色的fill和蓝色的stroke来突出显示stroke和border之间的一个主要区别-一半的stroke-width在基本形状的周长内部。

这样就可以实现“双边框”外观（从外向中心对于每个基本形状：蓝色->（蓝色+红色=紫色）->红色），这是仅通过CSS的border无法实现的（但border + outline 可以-请参见上面的JSFiddle，其中使用了一个<div>），并且在径向基本形状的情况下，难以实现使用radial-gradient()。

- CSSBurner

Answer 9

还可以考虑其他边框样式（dashed，dotted），以使边框部分完全透明：

http://jsfiddle.net/c1rvp3ga

body {
    background: url('http://i.imgur.com/pr86mh.jpg');
}

#foo {
  border: 5px dashed #b00;
  background: #ddd;
  background-clip: padding-box;
  padding: 8px;
  width: 100px;
  margin: 30px;
}

<p id=foo>some content</p>

- Friedrich -- Слава Україні

Answer 10

试试这个：

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

请在此处查看演示。

- A Malik