CSS3边框不透明度？

有没有一个简单的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格式，如果这是整个声明，将不会显示任何边界。 解决scheme是提供两个边界声明。 第一个是假的不透明度，第二个是真实的。 如果一个浏览器有能力，它将使用第二个，如果没有，它将使用第一个。

 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％的不透明红色边框的颜色相同（尽pipe边框下的任何graphics都不会渗透）。

更新：我已经添加了“background-clip：padding-box;” 到这个答案（每个SooDesuNe的build议在评论中），以确保边框保持透明，即使应用了纯色背景。

Answer 2

这很容易，使用一个固定的阴影与0偏移量：

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

此外，如果您为元素设置边框半径，则会为您提供相当圆形的边框

jsFiddle演示

Answer 3

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

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

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

• 它在Firefox中工作

• 我怀疑它在IE中的作用，但我怀疑有一些filter或行为，将使其工作。

还有这个stackoverflowpost ，其中提出了一些其他的问题，即边框呈现在你指定的任何背景颜色（或背景图像）的顶部; 从而限制了边界阿尔法在许多情况下的有用性。

Answer 4

据我所知，没有什么我通常在这种情况下做的是创build一个更大的大小（（边界* 2）+原始大小），并使其透明使用

 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> 

Answer 5

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

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

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

没有被W3C标准接受，甚至没有被CSS3接受。 我用下面的CSS代码直接inputvalidation器，

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

结果是，

值错误：边框无法识别太多值或值：1px solid rgba（255,0,0,0.5）

不幸的是，W3C并没有接受alpha值（“rgb”末尾的字母“a”）作为边界颜色值的一部分。 我不知道为什么它不是标准化的，因为它适用于所有的浏览器。 唯一的问题是你是想坚持W3C的标准，还是放弃它来创buildCSS。

使用W3C在线CSSvalidation器/直接input 。

总是一个好主意，使用validation器来检查你的工作，这真的有助于在编码工作几个小时之后，在编码时发现小的甚至是大的错误。

Answer 6

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

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

看看这里的演示 。