CSS3의 버그 : CSS3 그래디언트가있는 둥근 모서리

Question

둥근 모서리가있는 바깥 쪽 div의 경계가 CSS3 그래디언트가있는 내부 요소에 의해 잘려나가는 문제가 있습니다. 이것이 CSS3의 버그입니까? 만약 그렇다면, 나는 행복하게 버그 보고서를 제출할 것입니다.

그렇지 않은 경우 어떻게 수정해야합니까? 여기

소스 & 데모 : http://jsfiddle.net/joshuamcginnis/2aJ8X/

스크린 샷 :

Answer 1

문제가 그라디언트가 아닙니다. 보시려면 <h2> 요소에 단색 배경을주십시오. 대신 <h2> 및 포장 <div>의 모서리를 둥글게해야합니다.

border-radius: 10px 10px 0 0;과 해당 공급 업체별 버전을 <h2> 스타일에 추가하면 모두 작동합니다.

Answer 2

이 배경 그라데이션 특정 아니다. 둥근 모서리의 꼭대기에 겹쳐있는 h2 요소의 배경입니다. 나는 이 아니며은 가장 엄격한 의미의 버그이지만 상당히 잘 알려져 있습니다. 가장 쉬운 '수정'은 배경이있는 요소의 모서리를 반올림합니다. Example: just setup for chrome

Answer 3

오버플로 : 숨김;

작동하지만이 수행되지 않습니다 당신이 둥근 모서리에 다른 요소에 대한 배경을 설정할 때

h2 
{ 
    position:relative; 
    z-index:-1; 
.... 
}