css3 阴影效果

1. 向外阴影 box-shadow:0 0 30px #F30;

　　 /* x轴阴影 y轴阴影羽化值阴影颜色 */

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.test{height:200px; width:400px; border:1px solid #ccc; color:#0F6; font-size:40px; text-align:center; line-height:100px; font-weight:bold; margin:100px 0 0 100px; box-shadow:0 0 30px #F30;}
</style>
</head>

<body>
<div class="test">
    box-shadow
</div>
</body>
</html>

2. 向内阴影 box-shadow:0 0 30px #F30 inset;

/* x轴阴影 y轴阴影羽化值阴影颜色向内阴影*/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.test{height:200px; width:400px; border:1px solid #ccc; color:#0F6; font-size:40px; text-align:center; line-height:100px; font-weight:bold; margin:100px 0 0 100px; box-shadow:0 0 30px #F30 inset;}
</style>
</head>

<body>
<div class="test">
    box-shadow
</div>
</body>
</html>

3. 内部内容阴影 text-shadow:0 0 30px #F30;

　　/* x轴阴影 y轴阴影羽化值阴影颜色 */

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.test{height:200px; width:400px; border:1px solid #ccc; color:#0F6; font-size:40px; text-align:center; line-height:100px; font-weight:bold; margin:100px 0 0 100px; text-shadow:0 0 30px #F30;}
</style>
</head>

<body>
<div class="test">
    box-shadow
</div>
</body>
</html>