Webkit中奇怪的边界不透明行为？ [英] Weird border opacity behavior in 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的白色内部边框，在div的50％不透明度，但是，至少Chrome（但我怀疑Webkit）似乎重叠边框的边界（不知何故有意义）。

这是一个错误还是只是一个预期的功能

？

解决方案

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

示例也有一个带alpha的内部边框，并显示Firefox的行为。

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?

解决方案

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.

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