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

이 문제는 '밴딩'이라고하며이 문제는 모니터마다 다릅니다. 그다지 나쁘지는 않지만 색상 범위는 채우기를 원하는 영역의 크기가 작기 때문에 생각합니다. 색상 범위를 늘리고 상자의 치수로 재생하여 결과를 확인하십시오.