1

我在我的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 截图

歌剧下一步

火狐

火狐截图

4

1 回答 1

2

你创造了一种视错觉！

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

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

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

对比背景

于 2013-09-16T00:57:02.667 回答