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

【问题标题】：Weird border opacity behavior in Webkit?Webkit 中奇怪的边框不透明度行为？
【发布时间】：2011-05-31 06:42:00
【问题描述】：

我一直在测试不透明的边框，而 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 中，你会得到预期的结果：一个 10 像素的白色内边框，div 周围的不透明度为 50%，但是，至少 Chrome（但我怀疑 Webkit）似乎与边框的边框重叠（不知何故这是有道理的）。而且我认为这不是故意的，因为它似乎是重叠的！

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

【问题讨论】：

标签： css webkit border opacity

【解决方案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 的行为。

【讨论】：

【解决方案2】：

你遇到的问题在这里详细讨论：

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

如果您稍微更改碰撞边界的不透明度值，您会得到一个不完美的修复，希望对您有所帮助。

【讨论】：