類型
箱陰影：CSS3標準屬性，多個陰影屬性之間可以用逗號分隔
-MOZ-箱陰影：早期Firefox用來顯示陰影的屬性
-WebKit的箱陰影：早期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標準屬性箱陰影
但是如果你想讓早期的比如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
