그라데이션 배경을 사용하여 IE9에서 테두리 반경 출혈 및 그림자 불규칙성을 수정하는 방법은 무엇입니까?

그라디언트 배경을 사용하는 IE9의 테두리 반경 번짐 및 그림자 불규칙성 해결

Internet Explorer 9에서는 테두리 반경( 둥근 모서리) 및 배경 그라데이션을 사용할 수 있습니다. 그러나 이러한 기능을 결합할 때 사용자는 그라데이션이 둥근 모서리 외부로 번지는 문제에 직면했습니다. 또한 그림자의 불규칙성이 관찰되었습니다.

해결책

IE9는 기본적으로 테두리 반경과 배경 그라데이션을 모두 지원할 수 있지만 서로 원활하게 작동하지 않습니다. 출혈 문제를 해결하기 위한 한 가지 해결책은 요소를 다른 div 내에서 그라데이션과 둥근 모서리로 래핑하는 것입니다. 이 외부 div는 내부 요소와 동일한 크기와 둥근 모서리 값을 가져야 합니다. 오버플로를 숨김으로 설정하면 마스크 효과가 생성되어 그라데이션 오버플로를 효과적으로 숨깁니다.

HTML

<code class="html"><div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div></code>

CSS

<code class="css">.mask {
    overflow: hidden;
}

.roundedCorners {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0065a4', endColorstr='#a0cf67', GradientType=0); /* IE6-9 */
}</code>

위 내용은 그라데이션 배경을 사용하여 IE9에서 테두리 반경 출혈 및 그림자 불규칙성을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!