css - 如何删除导航栏上非常薄的明暗边缘

Question

我的一位客户注意到他们导航栏上的活动链接中有一条非常细的亮线和一条非常细的暗线。它几乎不引人注意，但它就在那里。我试过调整 CSS，但由于线条小于一个像素宽，我不确定它是 CSS。

这是网址：http ://www.abqlibraryfoundation.org

如果您查看导航栏中的“主页”链接，您会看到作为活动页面，它是一种生锈的橙色，左侧有一个薄薄的浅色边缘。右侧在橙色和绿松石色之间有一个深色薄边。

有谁知道这是什么原因造成的？

Answer 1

这是因为亚像素伪影。

如今，它也被建设性地用于平滑文本。这是因为屏幕由垂直排列的红色、绿色和蓝色子像素组成。请注意，某些屏幕上的实际顺序可能会有所不同。

rgb|rgb|rgb
---+---+---
rgb|rgb|rgb
---+---+---
rgb|rgb|rgb

这意味着在导航栏中，您有如下配置：

blue       |    red    |   blue
---+---+---+---+---+---+---+---
  b|  b|  b|r  |r  |r  |  b|  b
---+---+---+---+---+---+---+---
  b|  b|  b|r  |r  |r  |  b|  b
           ^           ^
           |           Artifact caused by sub-pixels being far away (darker line)
           |
           Artifact caused by vicinity of sub-pixels (lighter line)

我还创建了一个图像，说明了 lcd 屏幕 (rgb) 中的典型像素配置：

您可以看到在第一次过渡时，将蓝色变为橙色时，有一个绿色子像素，然后是蓝色和红色子像素，它们彼此相对接近。我们的眼睛认为这是白色的。

右侧（从橙色到蓝色的第二次过渡）显示了一个间隙，给人一种深色的错觉。

关于移动设备的说明

由于移动设备上的大多数网页通常都是按比例缩放的，因此这种效果远不那么明显（由于图像重采样）。要考虑的另一个方面是屏幕的方向可以改变，因此可能会在不同方向上产生伪影。

如果您对如何利用这种效果来渲染平滑文本感兴趣，可以继续阅读以下关于维基百科的文章：维基百科

这就是当今屏幕的工作方式，您无能为力（无需更改设计）

Answer 2

如果您看到一条白线，那是您的显示器有缺陷或错觉。这是来自 chrome 的放大截图。正如您在展开的部分中可以清楚地看到的那样，没有较亮的像素列。

通过反复试验，我发现我可以通过应用这种风格来消除显示器上的错觉。

.nav-bar>li#active>a{ border-left: rgb(146, 108, 66) 1px solid; }

它在左边缘创建了一个深 1 像素的橙色，最终看起来像这样。如果你放大那个，它最终看起来比原来的要差得多。