box-shadow 属性--设置元素阴影
实例： 向 div 元素添加 box-shadow
<!DOCTYPE html><html>
<head>
<style>
div{
width:300px
height:100px
background-color:#ff9900
-moz-box-shadow: 10px 10px 5px #888888 /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888
}
</style>
</head>
<body>
<div></div>
</body>
</html>
text-shadow 属性 ---设置文字阴影 <!DOCTYPE html>
<html>
<head>
<style>
h1{
text-shadow: 5px 5px 5px #FF0000
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
浏览器支持 表中的数字指定完全支持该属性的第一个浏览器版本。 数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。2. CSS3 阴影的文字特效 CSS代码: <!DOCTYPE CSS><CSS lang="en"><head><meta charset="UTF-8"><title>
3. box-shadow 属性 CSS3box-shadow属性应用
建议楼主多看看CSS手册。
语法：
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默认值：none
适用于：所有元素
继承性：有
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-shadow_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test li{margin-top:10px}
.test .mormal p{text-shadow:1px 1px rgba(0,0,0,.3)}
.test .blur p{text-shadow:1px 1px 1px rgba(0,0,0,.3)}
.test .group p{text-shadow:1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8)}
</style>
</head>
<body>
<ul class="test">
<li class="mormal">
<strong>普通文字阴影</strong>
<p>测试普通文字阴影效果</p>
</li>
<li class="blur">
<strong>模糊文字阴影效果</strong>
<p>测试模糊文字阴影效果</p>
</li>
<li class="group">
<strong>多重模糊文字阴影效果</strong>
<p>测试多重模糊文字阴影效果</p>
</li>
</ul>
</body>
</html>
