陰影製作效果看起來當然帥,firefox和safari/chrome通過私人屬性支援box-shadow屬性,box-shadow可以實現陰影製作效果,但是IE不支援box-shadow屬性,卻可以通過shadow濾鏡來實現陰影製作效果.
css"><style type="text/css">div { width:500px; height:500px; margin:0px; background:#FFFFFF;/*第一個參數是x軸陰影段長度第二個參數是y軸陰影段長度第三個參數是往四周陰影段長度第四個參數是陰影段顏色*/ box-shadow:0px 0px 10px #CCCCCC; -moz-box-shadow:0px 0px 10px #CCCCCC; -webkit-box-shadow:0px 0px 10px #CCCCCC;/*direction 陰影角度 0°為從下往上 順時針方向 strength 陰影段長度*/ -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6)\ progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6)\ progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6)\ progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6)"; *filter:progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6);}</style><div>php點點通-www.phpddt.com</div>
效果如下所示:
css實現div陰影製作效果,相容性較好" />