CSS3边框不透明度？ [英] CSS3 Border Opacity?

问题描述

有一个直接的CSS方法使一个元素的边框半透明的东西像：

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

border-opacity:0.7;

？

推荐答案

不幸的是， opacity 元素使整个元素（包括任何文本）半透明。使边界半透明的最好方法是使用rgba颜色格式。例如，这将给出一个带有50％不透明度的红色边框：

Unfortunately the opacity element 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 */
}

这种方法是一些浏览器不理解 rgba 格式，并且不会显示任何边框，如果这是整个声明。解决方案是提供两个边界声明。第一个与假的不透明度，第二个与实际。如果浏览器能够使用，它将使用第二个，如果没有，它将使用第一个。

The problem with this approach is that some browsers do not understand the rgba format and will not display any border at all if this is the entire declaration. 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 */
}

边界声明将是白色背景上50％不透明红色边框的等效颜色（虽然边框下的任何图形都不会渗透）。

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

UPDATE ：我添加了background-clip：padding-box;到这个答案（根据SooDesuNe的建议在评论），以确保边界保持透明，即使应用实心背景颜色。

UPDATE: I've added "background-clip: padding-box;" to this answer (per SooDesuNe's suggestion in the comments) to ensure the border remains transparent even if a solid background color is applied.

这篇关于CSS3边框不透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！