如何防止IE9圓角背景漸變出血？

IE9 borderRadius 和背景漸變出血：解決方案揭曉

在Web 開發領域，IE9 對border-radius 的支持一直是歡迎補充。然而，當與背景漸變結合時，出現了一個意想不到的問題：圓角外的漸層滲色。

為了解決這個問題，出現了一個聰明的解決方案：創建一個父 div 來掩蓋內部內容。這個遮罩 div 具有相同的大小、圓角和隱藏的溢出，充當屏障，防止漸變溢出邊緣。

利用以下HTML 和CSS，您可以實現此解決方法：

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

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