如何修復 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中文網其他相關文章！