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下一页截图

火狐

Answer 1

你创造了一种视错觉！

如果您将图像放入照片编辑器并选择颜色，您将看到不是正在改变的边框，而是由于渐变而背景正在改变。

最顶层元素的背景颜色从#BCBCBC开始，与#E0E0E0的边框颜色明显不同。然而，底部元素的背景是#E4E4E4 这与#E0E0E0无明显不同。

如果您将元素的背景颜色更改为实体并与#E0E0E0形成对比，那么您将看到边框工作正常。