CSS渐变背景上的丑陋线条

Question

我想为div的背景创建一个css渐变。

HTML 的

<section id="library">
    <div id="listHeader"></div>
</section>

CSS

#library {
width: 600px;
margin: 0 auto;
}

#listHeader {
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#1A1B1B), to(#191919));
border-top: 1px solid rgba(51, 51, 51, 0.6);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

这给了我想要实现的实际渐变，但它有一些丑陋的线条。

This is the result I get. (Chrome 11, Mac OSX 10.6.7)

其他渐变也会发生这种情况。 例如

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1D1D1D), to(#181818));

Answer 1

这个问题被称为'条带'，它因监视器而异。它并没有那么糟糕，但我也认为它是因为你想要填充的区域的尺寸你的颜色范围很小。尝试增加颜色范围并使用框的尺寸来查看结果。