http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html
http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
div{ float:left; margin-left:20px;}
/***内阴影效果(偏移值都为正):**/
#box-shadow{
-moz-box-shadow:5px 5px 5px #f00 inset; /* For Firefox3.6+ */
-webkit-box-shadow:5px 5px 5px#f00 inset; /* For Chrome5+, Safari5+ */
box-shadow:10px 10px 10px #f00 inset; /* For Latest Opera */
width:200px; height:180px; background:#F90; padding-top:20px;
}
/***内阴影效果(偏移值都为负):***/
#box-shadow2{
-moz-box-shadow:-5px -5px 5px #999 inset; /* For Firefox3.6+ */
-webkit-box-shadow:-5px -5px 5px #999 inset; /* For Chrome5+, Safari5+ */
box-shadow:-5px -5px 5px #999 inset; /* For Latest Opera */
width:200px; height:200px; background:red;}
/****内阴影效果(水平偏移为负,垂直偏移为负):***/
#box-shadow3{
-moz-box-shadow:-5px 5px 5px #999 inset; /* For Firefox3.6+ */
-webkit-box-shadow:-5px 5px 5px #999 inset; /* For Chrome5+, Safari5+ */
box-shadow:-5px 5px 5px #999 inset; /* For Latest Opera */
width:200px; height:180px; background:#0C0; color:#F30; font-size:40px; font-weight:900;
-moz-text-shadow:1px 2px 2px #000;
-webkit-text-shadow:1px 2px 2px #000; /* For Chrome5+, Safari5+ */
text-shadow:1px 2px 2px #000; padding-top:20px;}
/***内阴影效果(水平偏移为正,垂直偏移为负):***/
#box-shadow4{
-moz-box-shadow:5px -5px 5px #DDD inset; /* For Firefox3.6+ */
-webkit-box-shadow:5px -5px 5px #DDD inset; /* For Chrome5+, Safari5+ */
box-shadow:5px -5px 5px #DDD inset; /* For Latest Opera */
width:200px; height:200px; background:#3CF;
-moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:15px;}
</style>
<body>
<div id="box-shadow">我的阴影left top</div>
<div id="box-shadow2"></div>
<div id="box-shadow3">我在这儿。</div>
<div id="box-shadow4"></div>
</body>
</html>