类型
box-shadow：CSS3标准属性，多个阴影属性之间可以用逗号分隔
-moz-box-shadow：早期Firefox用来显示阴影的属性
-webkit-box-shadow：早期Chrome、Safari用来显示阴影的属性
语法
|
1 2 3 4 5 6 7 |
box-shadow: none | <shadow> [,<shadow>]* where <shadow> is defined as: inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] /*其中offset的xy是x和y轴偏移度，blur是模糊程度，spread是延展度，color则是颜色值*/ |
示例
|
1 2 3 4 5 6 |
-webkit-box-shadow: 1px 1px 5px #F9FFF9; -moz-box-shadow: 1px 1px 5px #F9FFF9; box-shadow: 1px 1px 5px #F9FFF9; /*比如说我要设置XY轴各偏1px，模糊为5其他默认颜色为#F9FFF9的阴影，*/ /*那么就在句子当中加入上边的代码*/ |
兼容性
对于现如今的主流浏览器，比如说FF4.0+、Chrome10.0+、Opera10.5+、Safari5.1+、IE9.0+，都直接支持CSS3标准属性box-shadow
但是如果你想让早期的比如Firefox4.0以前的版本支持阴影，那么要使用属性-moz-box-shadow，这是早期FF自己定制的CSS属性。
另外如小于10.0的Chrome或者小于5.1的Safari就要使用属性-webkit-box-shadow，否则就不会显示阴影。
本文由 落格博客 原创撰写：落格博客 » CSS之阴影属性box-shadow
转载请保留出处和原文链接：https://www.logcg.com/archives/569.html
