陰影效果看起來當然帥,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陰影效果,相容性較好" />