css做div的box阴影

最新推荐文章于 2024-04-28 17:27:49 发布

原创最新推荐文章于 2024-04-28 17:27:49 发布 · 761 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS3为box元素添加阴影效果，并覆盖了当前主流浏览器如IE8、Firefox、Safari、Chrome、Opera及IE5.5-7等的设置方法。通过提供兼容性解决方案，确保了网页在不同浏览器环境下的显示一致性。

做前台需要给box加上阴影，找了一下css3相关设置

.yingyin{
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=225, Color='#cccccc')";  /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=225, Color='#cccccc');  /* For IE 5.5 - 7 */
-moz-box-shadow: -2px 2px 10px #cccccc;/* for firefox */
-webkit-box-shadow: -2px -2px 10px #cccccc;/* for safari or chrome */
box-shadow:-2px 2px 10px #cccccc;/* for opera or ie9 */
/*{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}*/	
}

基本涵盖了目前流通的浏览器