语法：
box-shadow：<length> <length> <length> <length> || <color>
取值：
-
<length> <length> <length>? <length>? ||
<color>：
- 阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
说明：
设置块阴影
box-shadow这个属性应用的非常普遍，可以使你的元素立刻变得漂亮起来，只是记得不要把值设得太离谱。
box-shadow的四个参数：
x-offset x轴偏移
y-offset y轴偏移
blur 模糊值
color of shadow 阴影颜色
下面来看一个例子，代码如下：
<!
DOCTYPE html
>
<
html
>
<
head
>
<
title
>盒子阴影</
title
>
<
meta
charset
="utf-8"
/>
<
style
>
.box
{
width
:
300px
;
height
:
300px
;
background-color
:
#fff
;
/*
设置阴影
*/
-webkit-box-shadow
:
1px 1px 3px #292929
;
-moz-box-shadow
:
1px 1px 3px #292929
;
box-shadow
:
1px 1px 3px #292929
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="box"
>
<
br
/><
br
/><
br
/><
br
/>
看，是不是很有立体感？没有设置边框啊。
</
div
>
</
body
>
</
html
>
运行效果如下（Chrome中）：
还可以一次运用多个box-shadows，这样做会产生一些有趣的效果，看下面这个例子：
<!
DOCTYPE html
>
<
html
>
<
head
>
<
title
></
title
>
<
meta
charset
="utf-8"
/>
<
style
>
.box
{
width
:
300px
;
height
:
300px
;
background-color
:
#fff
;
/*
设置阴影
*/
-webkit-box-shadow
:
1px 1px 3px green, -1px -1px 3px blue
;
-moz-box-shadow
:
1px 1px 3px green, -1px -1px 3px blue
;
box-shadow
:
1px 1px 3px green, -1px -1px 3px blue
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="box"
>
<
br
/><
br
/><
br
/><
br
/>
看，我有两个颜色的阴影！O(∩_∩)O哈！
</
div
>
</
body
>
</
html
>
运行效果如下（Chrome中）：
可以看到，有两个颜色的阴影。
看下面一个例子：为下面这张图片添加阴影，让其有立体感：
<!
DOCTYPE html
>
<
html
>
<
head
>
<
title
></
title
>
<
meta
charset
="utf-8"
/>
<
style
>
body
{
width
:
500px
;
margin
:
50px auto
;
}
.box
{
position
:
relative
;
-webkit-box-shadow
:
1px 2px 4px rgba(0, 0, 0, 0.5)
;
-moz-box-shadow
:
1px 2px 4px rgba(0, 0, 0, 0.5)
;
box-shadow
:
1px 2px 4px rgba(0, 0, 0, 0.5)
;
padding
:
10px
;
background
:
#fff
;
}
.box img
{
width
:
100%
;
border
:
1px solid #8a4419
;
border-style
:
inset
;
}
.box:after
{
content
:
''
;
position
:
absolute
;
z-index
:
-1
;
/*
阴影部分
*/
-webkit-box-shadow
:
0 15px 20px rgba(0, 0, 0, 0.3)
;
-moz-box-shadow
:
0 15px 20px rgba(0, 0, 0, 0.3)
;
box-shadow
:
0 15px 20px rgba(0, 0, 0, 0.3)
;
width
:
70%
;
left
:
15%
;
height
:
100px
;
bottom
:
0
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="box"
>
<
img
src
="allstar.jpg"
title
="球星云集"
/>
</
div
>
</
body
>
</
html
>
运行效果如下（Chrome中）：
以前我吗需要在photoshop中把图片做成这样的效果，现在可以直接用CSS代码来实现了。