你能在 CSS 中设置边框不透明度吗？

Can you set a border opacity in CSS?

提问by mcbeav

Is there a straight forward CSS way to make the border of an element semi-transparent with something like this?

是否有一种直接的 CSS 方法可以使元素的边框变得半透明？

border-opacity: 0.7;

If not, does anyone have an idea how I could do so without using images?

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

回答by kingjeffrey

Unfortunately the opacityelement makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity:

不幸的是，该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 */
}

The problem with this approach is that some browsers do not understand the rgbaformat and will not display any border at all if this is the entire declaration. The solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

这种方法的问题是一些浏览器不理解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 */
}

The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

第一个边框声明将是白色背景上 50% 不透明红色边框的等效颜色（尽管边框下的任何图形都不会渗出）。

UPDATE:I've added "background-clip: padding-box;" to this answer (per SooDesuNe's suggestion in the comments) to ensure the border remains transparent even if a solid background color is applied.

更新：我添加了“背景剪辑：填充框；” 对此答案（根据 SooDesuNe 在评论中的建议），以确保即使应用了纯色背景，边框仍保持透明。

回答by Pedro L.

It's easy, use a solid shadow with 0 offset:

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

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

Also, if you set a border-radius to the element, it gives you pretty rounded borders

此外，如果您为元素设置边框半径，它会为您提供非常圆润的边框

jsFiddle Demo

jsFiddle 演示

回答by Lee

As others have mentioned: CSS-3 says that you can use the rgba(...)syntax to specify a border color with an opacity (alpha) value.

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

here's a quick exampleif you'd like to check it.

如果你想检查一下，这里有一个简单的例子。

• It works in Safari and Chrome (probably works in all webkit browsers).

• It works in Firefox

• I doubt that it works at all in IE, but I suspect that there is some filter or behavior that will make it work.

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

• 它适用于 Firefox

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

There's also this stackoverflow post, which suggests some other issues--namely, that the border renders on-top-of any background color (or background image) that you've specified; thus limiting the usefulness of border alpha in many cases.

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

回答by Mark2090

If you check your CSS coding with W3C validator, you will see if your CSS code is acceptable, even if it worked in the major browsers.

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

Creating a transparent border via CSS, as written above,

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

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

is not accepted by W3C standards, not even for CSS3. I used the direct input validator with the following CSS code,

W3C 标准不接受，甚至 CSS3 也不接受。我使用了带有以下 CSS 代码的直接输入验证器，

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

The results were,

结果是，

Value Error : border Too many values or values are not recognized : 1px solid rgba(255,0,0,0.5 )

值错误：边界值太多或无法识别值：1px solid rgba(255,0,0,0.5)

Unfortunate that the alpha value (the letter "a" at the end of "rgb") is not accepted by W3C as part of the border color values as yet. I do wonder why it is not standardized, since it works in all browsers. The only hitch is whether you want to stick to W3C standards or step aside from it to create something in CSS.

不幸的是，W3C 尚未接受 alpha 值（“rgb”末尾的字母“a”）作为边框颜色值的一部分。我确实想知道为什么它没有标准化，因为它适用于所有浏览器。唯一的问题是你是想坚持 W3C 标准还是放弃它而在 CSS 中创建一些东西。

To use W3C online CSS validator / Direct Input.

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

Always a good idea to use a validator to check your work, it really helps finding small or even large errors in coding when your going cross-eyed after hours of coding work.

使用验证器来检查您的工作始终是一个好主意，当您在数小时的编码工作后目瞪口呆时，它确实有助于发现编码中的小错误甚至大错误。

回答by Breezer

*Not as far as i know there isn't what i do normally in this kind of circumstances is create a block beneath with a bigger size((bordersize*2)+originalsize) and make it transparent using

*据我所知，在这种情况下我通常不会做的是在下面创建一个更大尺寸的块（（边界尺寸* 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>

Update:

更新：

This answer is outdated, since after all this question is more than 8 years old. Today all up to date browsers support rgba, box shadows and so on. But this is a decent example how it was 8+ years ago.

这个答案已经过时了，因为毕竟这个问题已经超过 8 年了。今天所有最新的浏览器都支持 rgba、框阴影等。但这是一个体面的例子，它是 8 多年前的样子。

回答by Stephan Samuel

As an alternate solution that maywork in somecases: change the border-styleto dotted.

作为在某些情况下可能有效的替代解决方案：将.border-styledotted

Having alternating groups of pixels between the foreground color and the background color isn't the same as a continuous line of partially transparent pixels. On the other hand, this requires significantly less CSS and it is much more compatible across every browser without any browser-specific directives.

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

回答by RBk

Other answers deal with the technical aspect of the border-opacity issue, while I'd like to present a hack(pure CSS and HTML only). Basically create a container div, having a border div and then the content div.

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

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

And then the CSS:(set content border to none, take care of positioning such that border thickness is accounted for)

然后是 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;
}

回答by A Malik

try this:

尝试这个：

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

And here comes our magical CSS..

我们神奇的 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;
}

Check out the Demohere.

在这里查看演示。