陰影效果是web開發中一個頭疼的問題,和生成圓角一樣,都是web開發中經常用到的,雖然實現麻煩,但是效果不錯,所以客戶經常要求有陰影效果。
我做過各種各樣的陰影效果,有給整個站點的body添加陰影效果的,有給某個div實現的,其大部分都是用圖片生成的,很難定位,而且添加了不少的div專門用于添加圖片,維護起來太麻煩了。經常是為了修改其他的layout問題,而把陰影效果弄的面目全非。
現在好了,我找到了一種簡單的用CSS生成陰影的方法,大家看看下面的例子:
怎么樣,效果很酷吧,簡單好用,而且支持主流的瀏覽器,連最爛的IE6都支持。
div.shadows {
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";
filter: progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6);
}
From: http://www.fogtowerblog.com/web/css/cross-browser-drop-shadows-using-pure-css.html