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