问题

是否有直接的CSS方法使元素的边框具有这样的内容半透明?

 border-opacity: 0.7;
 

如果没有,有谁知道如何在不使用图像的情况下这样做?

  最佳答案

不幸的是,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-caption:palling-box;”这个答案(根据SooDesuNe在评论中的建议),以确保边界保持透明,即使应用了坚实的背景颜色.

  相同标签的其他问题

cssopacity