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

有一个直接的CSS方法，使一个元素的边界半透明的东西像这样?

border-opacity: 0.7;

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

840713 次浏览
小开

*据我所知，没有什么我通常在这种情况下是创建一个块下面与更大的大小((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年前的一个很好的例子。

小开
最佳答案

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

小开

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

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

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

  • 它在Firefox中工作

  • 我怀疑它在IE中工作，但我怀疑有一些过滤器或行为，将使它工作。

还有CSS RGBA边框/背景alpha双，它暗示了一些其他问题——即，边框呈现在你指定的任何背景颜色(或背景图像)之上;因此在许多情况下限制了边界alpha的有用性。

小开

试试这个:

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

在这里查看演示。

小开

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

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

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

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

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

结果是，

Value Error: border过多的值或值不被识别: 1px solid rgba(255,0,0,0.5)

不幸的是，alpha值(rgb末尾的字母“a”)目前还不被W3C接受为边界颜色值的一部分。我想知道为什么它没有标准化，因为它可以在所有浏览器中工作。唯一的问题是您是要坚持W3C标准，还是要撇开它，在CSS中创建一些东西。

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

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

小开

这很简单，使用一个0偏移量的实体阴影:

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

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

jsFiddle Demo

enter image description here

小开

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

作为五月在一些情况下工作的替代解决方案:将border-style更改为dotted。

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

小开

也可以考虑其他边界样式(dashed， dotted)，使边界部分完全透明:

< img src = " https://i.stack.imgur.com/bDG7U.png " alt = " / >

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>

小开

由于这个答案是谷歌结果的顶部，所以决定为像我这样的新手发布一个更新(2021年)的答案。

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

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

参见示例提琴在这里- http://jsfiddle.net/joshdane/74pybasm/33/

你可以使用它，享受它。

有一些关于旧的浏览器不支持rgba的讨论，但大多数人都是不再使用旧浏览器。如果您只是在学习，不要担心支持旧的浏览器。

enter image description here

小开

在这里稍微跳出框框思考一下:如果你正在使用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>的例子)，并且很难实现(在径向基本形状的情况下)。


提交答案