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

我的“当前选定”导航元素使用一个红色（＃dc251c）指示条作为空白div的背景。我还有一个“特别通知”文字横幅，它有一个红色（＃dc251c）顶部边框。在CSS中具有相同十六进制颜色的两个边框看起来不一样

这两个红柱示紧邻，并明确是不一样的颜色：

导航元件通过与类“活性标记”一个空div创建的里内。

<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>

哪些检查证实是正确的CSS：

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

和计算机辅助验证边框顶部颜色是＃DC251C

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

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

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

谢谢！ julie

P.S.此代码来自我正在使用的开发人员构建的RoR +引导程序框架。所以可能有其他一些有用的信息 - 请让我知道。

来源

2016-01-12 Julie Spiegler

您可以检查浏览器中的元素并确认十六进制颜色吗？它好像被重写在某个地方。 – phaze0

@Julie Spiegler我们需要看到一个或多个css的例子。我的猜测将是不透明/阴影正在设置的地方 – partypete25

请提供一个jsFiddle或片段说明问题。 – jcaron

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

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

但是，使用Inspector并关闭大概正确的边框顶部显示了下面的阴影。

感谢您的第一次stackoverflow后的经验。 j

来源

2016-01-13 21:01:40

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

检查项目：

opacity任一元素本身，或将被再次覆盖它
与α-组分（rgba）的颜色（一个元件上，该元件本身，或一个覆盖它）
阴影
border-style集到inset，outset等

来源

2016-01-12 00:50:23 jcaron

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

回答

相关问题