CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose

本文摘自：http://blog.csdn.net/freshlover/article/details/7610269

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

浏览器的兼容：

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

[css] view plain copy

1. .box-shadow{
3. //Firefox4.0-
5. -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
7. //Safariand Google chrome10.0-
9. -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
11. //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
13. box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
15. }

注意：出于方便，后文的css属性有的地方只写了box-shadow属性，没有写-moz-和-webkit-前缀的形式，在使用中不要忘记加上。

为了更清楚的了解box-shadow的特征，做几个小测试，看效果：

相关代码：

[html] view plain copy

10. .box-shadow-1{
11. -webkit-box-shadow: 3px 3px 3px;
12. -moz-box-shadow: 3px 3px 3px;
13. box-shadow: 3px 3px 3px;
14. }
15. .box-shadow-2{
16. -webkit-box-shadow:0 0 10px #0CC;
17. -moz-box-shadow:0 0 10px #0CC;
18. box-shadow:0 0 10px #0CC;
19. }
20. .box-shadow-3{
21. -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);
22. -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);
23. box-shadow:0 0 10px rgba(0, 204, 204, .5);
24. }
25. .box-shadow-4{
26. -webkit-box-shadow:0 0 10px 15px #0CC;
27. -moz-box-shadow:0 0 10px 15px #0CC;
28. box-shadow:0 0 10px 15px #0CC;
29. }
30. .box-shadow-5{
31. -webkit-box-shadow:inset 0 0 10px #0CC;
32. -moz-box-shadow:inset 0 0 10px #0CC;
33. box-shadow:inset 0 0 10px #0CC;
34. }
35. .box-shadow-6{
36. box-shadow:-10px 0 10px red, /*左边阴影*/
37. 10px 0 10px yellow, /*右边阴影*/
38. 0 -10px 10px blue, /*顶部阴影*/
39. 0 10px 10px green; /*底边阴影*/
40. }
41. .box-shadow-7{
42. box-shadow:0 0 10px 5px black,
43. 0 0 10px 20px red;
44. }
45. .box-shadow-8{
46. box-shadow:0 0 10px 20px red,
47. 0 0 10px 5px black;
48. }
49. .box-shadow-9{
50. box-shadow: 0 0 0 1px red;
51. }
55. .obj{
56. width:100px;
57. height:100px;
58. margin:50px auto;
59. background:#eee;
60. }
61. .outer{
62. width: 100px;
63. height: 100px;
64. border: 1px solid red;
65. }
66. .inner{
67. width: 60px;
68. height: 60px;
69. background-color: red;
70. -webkit-box-shadow: 50px 50px blue;
71. -moz-box-shadow: 50px 50px blue;
72. box-shadow: 50px 50px blue;
73. }