Question

我的＆＃34;目前被选中＆＃34;导航元素使用红色（＃dc251c）指示条创建为空div的背景。我还有一个特别的通知＆＃34;带有红色（＃dc251c）上边框的文字横幅。

这两个红色条显示在紧邻的位置，显然颜色不同：

导航元素是通过一个空的div创建的，其中包含类＆＃34; active-marker＆＃34;在里面。

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

检查员确认风格是

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

和Computed background-color是＃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;
}

和Computed验证border-top-color是＃DC251C

如果问题是这些红色在我不同的机器，显示器或浏览器上看起来不同。或者如果一个被指定为HEX而另一个被指定为RGB。但我无法弄清楚同一页面上的相同HEX值是如何看起来不同的（无论是在Chrome，Firefox还是Safari中查看）。

以下是一些线索： - 将屏幕截图加载到Photoshop中表示导航颜色是正确的红色（＃dc251c），文本通知边框错误（＃c62119）。 - 如果我在Inspector中手动将导航突出显示更改为＃c62119，则两个红色匹配。 - 问题只出现在最宽的尺寸上（它是一个响应式设计）。对于最窄的尺寸，设计是不同的，但对于中间尺寸看起来是正确的。

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

谢谢！朱莉

P.S。此代码来自我正在使用的开发人员构建的RoR + bootrap框架。所以可能还有其他一些有用的信息 - 请告诉我。

Answer 1

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

要检查的项目：

opacity关于元素本身，或者是一个覆盖它的元素
带有alpha分量（rgba）的颜色（同样，在元素本身上，或覆盖它的一个）
阴影
border-style设置为inset，outset等

Answer 2

胜利的影子！谢谢partypete25和jcaron。

我认为需要某种测试用例，但我真的不知道在哪里开始基于框架创建它。

但是，使用Inspector并关闭可能正确的边框顶部会显示下方的阴影。

感谢您提供良好的第一次stackoverflow-post体验。 Ĵ

CSS中具有相同HEX颜色的两个边框看起来不一样

2 个答案: