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>

您可以对其进行测试here。在Firefox中你会得到预期的：一个10px的白色内边框，在div周围有50％的不透明度，但是，至少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

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

Answer 2

此处详细讨论了您遇到的问题：

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

如果你改变碰撞边界的不透明度值，你会得到一个非完美的修复，希望有所帮助。

Webkit中奇怪的边框不透明行为？

2 个答案: