html - CSS 中具有相同十六进制颜色的两个边框看起来不一样

Question

我的“当前选定的”导航元素使用一个红色 (#dc251c) 指示条，该指示条创建为空 div 的背景。我还有一个“特别通知”文本横幅，其顶部边框为红色 (#dc251c)。

这两个红色条显示为紧邻，并且显然不是相同的颜色:

导航元素是通过一个空的 div 创建的，在 li 中带有“active-marker”类。

<div class="active-marker"></div>

检查员确认样式为

.menu li .active-marker {
    display: none;
    position: absolute;
    height: 5px;
    bottom: 0px;
    width: 100%;
    background-color: #dc251c;
}

计算出的背景颜色是#DC251C。

公告边框是通过带有彩色顶部(和底部)边框的 div 创建的:

<div class="current_campaign text-campaign pull-center">ETC</div>

哪个 Inspector 确认 CSS 是正确的:

.text-campaign {
    font-size: 33px;
    border-top: 3px solid #dc251c;
    border-bottom: 3px solid #dc251c;
    background: #ffffff;
    padding-bottom: 1px;
}

并且计算验证 border-top-color 是 #DC251C

如果问题是这些红色在不同的机器、显示器或浏览器上看起来不同，我会理解。或者，如果一个指定为 HEX，另一个指定为 RGB。但我无法弄清楚相同的十六进制值在同一页面上看起来有何不同(无论是在 Chrome、Firefox 和 Safari 中查看)。

这里有一些线索:- 将屏幕截图加载到 Photoshop 中表明导航颜色是正确的红色 (#dc251c)，并且文本通知边框错误 (#c62119)。- 如果我在检查器中手动将导航突出显示更改为#c62119，则两个红色匹配。- 该问题仅出现在最宽的尺寸(这是响应式设计)。最窄尺寸的设计有所不同，但对于中间尺寸看起来是正确的。

有关如何修复的任何线索或建议(除了将通知边框更改为完全不同的内容，这是我的解决方法策略)？

谢谢!朱莉

附注该代码来自与我合作的开发人员构建的 RoR+bootrap 框架。因此可能还有一些其他有用的信息 - 请告诉我。

Answer 1

颜色#c62119恰好是#dc251c的90%。

要检查的元素:

• 元素本身或覆盖它的元素的不透明度
• 带有 alpha 分量 (rgba) 的颜色(同样，在元素本身上，或覆盖它的颜色)
• 阴影
• border-style 设置为 inset、outset 等。