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

发布于 2024-09-30 07:37:30 字数 122 浏览 5 评论 0原文

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

border-opacity: 0.7;

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

原文

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

border-opacity: 0.7;

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

森林散布 2024-10-07 07:37:30

不幸的是，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;，以确保即使应用纯色背景色，边框也保持透明。

Unfortunately the opacity property 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:

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 */
}

For extremely old browsers that don't support rgba (IE8 and older), 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.

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

I've added background-clip: padding-box; to the examples above to ensure the border remains transparent even if a solid background color is applied.

回复收藏 0 原文

生生不灭 2024-10-07 07:37:30

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

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

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

jsFiddle 演示

在此处输入图像描述

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

#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

enter image description here

回复收藏 0 原文

网白 2024-10-07 07:37:30

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

这里有一个快速的 JSFiddle 演示（如果您想查看的话）。

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

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

回复收藏 0 原文

毁我热情 2024-10-07 07:37:30

如果您使用 W3C 验证器检查您的 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 创建一些东西。

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

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

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.

Creating a transparent border via CSS, as written above,

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,

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

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.

To use W3C online CSS validator / Direct Input.

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.

回复收藏 0 原文

oО清风挽发oО 2024-10-07 07:37:30

*据我所知，在这种情况下我通常不会做的是在下面创建一个更大尺寸的块（（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、盒子阴影等。但这是八年前的一个很好的例子。

*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

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.

回复收藏 0 原文

避讳 2024-10-07 07:37:30

作为可能在某些情况下工作的替代解决方案：将边框样式更改为点式。

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

回复收藏 0 原文

怎言笑 2024-10-07 07:37:30

人们还可以考虑其他边框样式（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>

One may also consider other border styles (dashed, dotted) to make the border partly fully transparent:

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>

回复收藏 0 原文

情绪 2024-10-07 07:37:30

其他答案涉及边框不透明度问题的技术方面，而我想提出一个 hack（仅限纯 CSS 和 HTML）。基本上创建一个容器 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;
}

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.

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

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

回复收藏 0 原文

演多会厌 2024-10-07 07:37:30

跳出框框思考一下：如果您正在使用 SVG 基本形状，您可以使用 lines 和 lines-width 的组合 (浏览器支持 > 97%) 和 中风不透明度 (浏览器支持> 99%）基本上与OP要求的内容相同。

例如，此声明：

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

将在周围添加一个半透明的蓝色光环，并使用 #000 填充。

这个 JSFiddle 提供了几种 SVG 基本形状的演示。小提琴使用红色的填充和蓝色的描边来突出显示描边和边框之间的主要区别 - 一半lines-width 位于基本形状的周界内。

这给出了“双边框”外观（每个基本形状从外部到中心：蓝色->（蓝色+红色=紫色）->红色），这是使用 CSS border 单独（但是 border + outline 可以 - 请参阅上面的 JSFiddle 以获取使用

的示例），并且很难使用 radial-gradient() 实现（在径向基本形状的情况下）。

Thinking outside the box a bit here: if you are working with SVG basic shapes, you can use a combination of stroke, stroke-width (browser support > 97%), and stroke-opacity (browser support > 99%) to do essentially the same thing the OP is asking.

For example, this declaration:

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

will add a translucent blue halo around the perimeter of a <circle> with #000 fill.

This JSFiddle provides a demo for several SVG basic shapes. The fiddle uses a red fill and blue stroke to highlight a major difference here between stroke and border - half the stroke-width is inside the perimeter of the basic shape.

This gives a "double border" appearance (from outside towards the center for each basic shape: blue->(blue + red = purple)->red) that would be impossible to achieve with CSS border alone (but border + outline could - see the above JSFiddle for an example using a <div>), and difficult to achieve (in the case of radial basic shapes) with a radial-gradient().

回复收藏 0 原文

别低头，皇冠会掉 2024-10-07 07:37:30

试试这个：

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

查看演示。

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 <div> has transparent borders.
</div>

And here comes our magical 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 Demo here.

回复收藏 0 原文

oО清风挽发oО 2024-10-07 07:37:30

由于这个答案位于 Google 结果的顶部，因此决定为像我这样的新手发布更新的（2021）答案。

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

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

请参阅此处的示例小提琴 - http://jsfiddle.net/joshdane/74pybasm/33/

您可以使用它，并享受它。

有一些讨论称旧版浏览器不支持 rgba，但大多数人都支持不再使用旧版浏览器。如果您刚刚学习，不必担心支持旧版浏览器。

Since this answer is top of Google results, decided to post an updated (2021) answer for the rookies like me.

You can set a border opacity buy using an rgba color.

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

See example fiddle here - http://jsfiddle.net/joshdane/74pybasm/33/

You can use it, and enjoy it.

There is some discussion that older browsers don't support rgba, but most people are not using older browsers anymore. If you are just learning, don't worry about supporting older browsers.

回复收藏 0 原文

~没有更多了~