CSS3边框不透明度？

Question

是否有一种直接的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格式,将不会显示任何边界可言,如果这是整个声明.解决方案是提供两个边界声明.第一个是假的不透明度,第二个是实际的.如果浏览器有能力,它将使用第二个,如果没有,它将使用第一个.

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;" 这个答案(每SooDesuNe的在评论中建议),以确保边境保持透明,即使施加了坚实的背景颜色.

Answer 2

这很容易,使用0偏移的实心阴影:

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

此外,如果您为该元素设置border-radius,它会为您提供相当圆的边框

jsFiddle演示

Answer 3

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

这是一个快速的例子,如果你想检查它.

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

• 它适用于Firefox

• 我怀疑它在IE中是否有效,但我怀疑有一些过滤器或行为可以使它工作.

还有这个stackoverflow帖子,它提出了一些其他问题 - 即边框呈现在您指定的任何背景颜色(或背景图像)的顶部; 因此在许多情况下限制了边界α的有用性.

Answer 4

*据我所知,在这种情况下我没有正常做的是在较大尺寸下创建一个块((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年多以前的一个很好的例子.

Answer 5

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

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

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

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

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

结果是,

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

不幸的是,作为边界颜色值的一部分,W3C不接受alpha值("rgb"末尾的字母"a").我不知道它为什么不标准化,因为它适用于所有浏览器.唯一的障碍是你是想要坚持W3C标准还是从它开始在CSS中创造一些东西.

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

使用验证器来检查您的工作总是一个好主意,它确实有助于在编码工作数小时后进行交叉编码时发现编码中的小错误甚至是大错误.