HTML 标题元素边框淡化

Question

我的 h3 元素出现奇怪的行为

我设置了如下样式和代码

.well h3 {
    border-bottom: 1px solid #E0E0E0;
    font-size: 22.5px;
    line-height: 42px;
    font-weight: bold;
    margin-bottom: 11px;
}

<div class="well">
    <h3>Login</h3>
    ...
</div>

<div class="well">
    <h3>Atividade recente</h3>
    ...
</div>

<div class="well">
    <h3>Clans associados</h3>
    ...
</div>

正如您在下面的屏幕截图中所见，每个元素的边框都使用不同的颜色(不透明度？)绘制。第三个几乎看不见。我已经用 Firebug 检查了每一个，样式始终如上所示正确。

我错过了什么？

Opera Next 截图

火狐

Answer 1

你创造了一种视错觉!

如果您将图像放入照片编辑器并选择颜色，您会发现变化的不是边框，而是背景由于渐变而发生变化。

最顶部元素的背景颜色从 #BCBCBC 开始，这与 #E0E0E0 的边框颜色明显不同。但是底部元素的背景是 #E4E4E4这与 #E0E0E0 没有明显区别。

如果您将元素的背景颜色更改为纯色并与 #E0E0E0 形成对比，您会发现您的边框工作正常。