Weird border opacity behavior in Webkit?

问题:

I've been testing with borders with opacity and Webkit seems to be having a weird behavior.

Here's my code

<style>
div{
    position: relative;
    width: 300px;
    height: 300px;
    background: #00f;
}
span{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 10px solid rgba(255, 255, 255, 0.5);
}
</style>
<div>
    <span></span>
</div>

You can test it here. In Firefox you'll get as expected: a 10px white inner border with 50% opacity around the div, however, at least Chrome (but I suspect Webkit) seems to be overlapping the border's borders (somehow that makes sense). And I think it's not intented, since it seems to be overlapping itself!

Is this a bug or just an intended feature?

回答1:

Bug on the Chrome issues list (guess what, nobody cares):
http://code.google.com/p/chromium/issues/detail?id=36475&q=transparent%20border%20color&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

Taking a look at the spec, this indeed seems like a bug:
http://www.w3.org/TR/css3-background/#box-shadow-samples

The examples, too, have an inner border with alpha and show Firefox like behavior.

回答2:

The problem you have is discussed in detail here:

http://snook.ca/archives/html_and_css/safari-transparent-borders

If you change the opacity value of the colliding borders just a tiny bit you get a non-perfect fix, hope that helps.