IE3中的CSS3陰影變硬圓角div

Question

當我在div上只使用圓角時，它看起來我在IE9中的預期。

border-radius: 7px; 

然而，當我添加以下行，使陰影，我收到了意想不到的效果：

filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3); 

下面是效果截圖。我指的是醜陋的黑色小角落突然附在我的淡藍色的div：

http://imageshack.us/photo/my-images/406/blackcorners.png/

我怎樣才能擺脫呢？

Answer 1

原生IE9支持box-shadow，所以不需要使用舊的filter風格。

如果你使用filter來獲得更老的IE版本，那麼它可能是兩個陰影在IE9中發揮作用，並且稍有不同，從而造成奇怪的效果。

我的第一個建議是簡單地刪除filter樣式。這意味着IE的版本不會看到盒子陰影，但它並不是佈局的關鍵元素。

如果這樣做不好，那麼我會建議使用CSS3Pie來實現舊版IE瀏覽器的陰影。作爲獎勵，它也會執行border-radius。

使用CSS3Pie，您可以在舊版IE中使用標準CSS box-shadow風格，而不必擔心filter風格。而且，爲了展示它如何直接回答你的問題，它會在IE9中自動關閉，所以你不會得到雙重陰影效果。

希望有所幫助。