使用漸變背景解決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中文網其他相關文章！
