Internet Explorer 9에서 둥근 모서리로 그라데이션 번짐을 방지하는 방법은 무엇입니까?

IE9 테두리 반경 및 배경 그라데이션: 번짐 문제 해결

Internet Explorer 9(IE9)는 CSS3 테두리 반경과 배경을 모두 지원합니다. 하지만 이러한 기능을 결합하는 것은 어려운 일입니다. 둥근 모서리에서 그라데이션이 번져 원치 않는 시각적 효과를 만들어냅니다.

문제 이해

이 문제를 설명하려면 다음 이미지를 고려하세요. 첫 번째 이미지는 예상되는 동작을 보여줍니다. 그라데이션 번짐은 없지만 모서리가 날카롭습니다. 두 번째 이미지는 그라데이션과 둥근 모서리가 결합되었을 때 발생하는 번짐을 보여줍니다.

[이미지 URL: https://i.sstatic.net/lCBe6.png]

[이미지 URL: https://i.sstatic.net/BbZ0D.png]

회피: 마스킹 기술 사용

이 문제에 대한 한 가지 해결 방법은 마스킹 기술을 사용하는 것입니다. . 여기에는 그라데이션과 둥근 모서리가 있는 요소 주위에 래퍼 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>

이 해결 방법을 사용하면 마스크가 둥근 모서리 외부에서 번지는 그라데이션을 숨겨 번지는 문제를 해결합니다.

위 내용은 Internet Explorer 9에서 둥근 모서리로 그라데이션 번짐을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!