CSS3之阴影

CSS3中新增属性-阴影，可以做出很多漂亮的效果。

文字阴影text-shadow

text-shadow属性值的顺序：

text-shadow: h-shadow v-shadow blur color;

参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。

一个栗子：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS3阴影</title><style  type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #999;text-align: center;font-size:80px;font-weight:bold;text-shadow:10px 10px #333;       }</style>
</head><body><p>Text Shadow</p>
</body>
</html>

图图：

通过控制水平位移和垂直位移可以控制阴影偏向，正值偏右偏下。负值偏左偏上。

栗子：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS3阴影</title><style  type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #999;text-align: center;font-size:80px;font-weight:bold;text-shadow:-10px -10px #333;       }</style>
</head>
<body><p>Text Shadow</p>
</body>
</html>

图图：

可以修改模糊半径来控制阴影的模糊程度：

栗子：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS3阴影</title><style  type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #999;text-align: center;font-size:80px;font-weight:bold;text-shadow:10px 10px 30px #333;       }</style>
</head>
<body><p>Text Shadow</p>
</body>
</html>

图图：

也可以定义多个阴影用逗号隔开：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS3阴影</title><style  type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #fff;text-align: center;font-size:80px;font-weight:bold;text-shadow:20px 50px 10px #600,30px -10px 10px #060,-40px 20px 10px #006;       }</style>
</head>
<body><p>Text Shadow</p>
</body>
</html>

图图

还可以来点特效，比如燃烧：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS3阴影</title><style  type="text/css">body{background:#000;}p{margin: 0;padding:24px;font-family: helvetica,arial,sans-serif;color: #000;text-align: center;font-size:80px;font-weight:bold;text-shadow:0 0 4px #fff,0px -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;       }</style>
</head>
<body><p>Text Shadow</p>
</body>
</html>

图图：

浮雕效果：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS3阴影</title><style  type="text/css">body{background:#ccc;}p{margin: 0;padding:24px;font-family: helvetica,arial,sans-serif;color: #d1d1d1;background:#ccc;text-align: center;font-size:80px;font-weight:bold;text-shadow:-1px -1px #fff,1px 1px #333;       }</style>
</head>
<body><p>Text Shadow</p>
</body>
</html>

图图：

盒子阴影box-shadow

box-shadow的属性值的顺序：

box-shadow: hoff voff bd sd color inset;

这里，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影的颜色，inset 是一个关键字，在使用时指示阴影是内部阴影，而不是外部阴影。前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。

上一些栗子：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS3阴影</title><style  type="text/css">#sbox{width: 200px;padding: 32px;background: #3385ff;text-align: center;-webkit-box-shadow:5px 5px 10px black;-moz-box-shadow: 5px 5px 10px black;
            box-shadow: 5px 5px 10px black;           }</style>
</head><body><div id="sbox">Box Shadow</div>
</body>
</html>