Странное поведение непрозрачности границ в Webkit?

Question

Я тестировал с границами с непрозрачностью, и Webkit, похоже, ведет себя странно.

Вот мой код

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

Вы можете проверить это здесь . В Firefox вы получите, как и ожидалось: белая внутренняя граница 10px с непрозрачностью 50% вокруг div, однако, по крайней мере, Chrome (но я подозреваю, что Webkit), похоже, перекрывает границы границы (каким-то образом это имеет смысл). И я думаю, что это не является намерением, поскольку кажется, что оно перекрывает себя!

Это ошибка или просто предполагаемая функция ?

Answer 1

Ошибка в списке проблем Chrome (угадайте, что, никого не волнует):
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

Если посмотреть на спецификацию, это действительно похоже на ошибку:
http://www.w3.org/TR/css3-background/#box-shadow-samples

Примеры также имеют внутреннюю рамку с альфа-каналом и показывают поведение, подобное Firefox.

Answer 2

Проблема, с которой вы столкнулись, подробно обсуждается здесь:

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

Если вы немного измените значение непрозрачности сталкивающихся границ, вы получите не идеальное исправление,надеюсь, что это поможет.