首页 > 代码库 > DIV CSS3 text-shadow字体阴影
DIV CSS3 text-shadow字体阴影
CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式，音乐放松椅本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。
一、CSS3单词与语法 - TOP
1、CSS3单词：
text-shadow
2、语法结构
div{text-shadow:5px 2px 6px #000;}
设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果，音乐放松椅同时阴影大小范围为6px，阴影颜色为黑色（#000）。
文字阴影语法结构图
文字阴影语法结构分析图
3、说明
文字显示阴影效果共4个值，第一个代表距离左多少距离开始显示阴影效果，音乐放松椅第二个值代表距离上多少距离开始显示阴影效果，第三个值代表阴影范围大小，第四个值为阴影效果颜色。
二、案例 - TOP
1、案例HTML代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体阴影 在线演示 DIVCSS5</title>
<link href="http://www.mamicode.com/images/style.css" rel="stylesheet" type="text/css" />
<!-- www.divcss5.com -->
</head>
<body>
<div>我阴影文字</div>
<div class="txt">音乐放松椅文字阴影测试内容1</div>
<div class="txt2">文字阴影测试内容2</div>
</body>
</html>
2、对应CSS代码：
.txt {text-shadow:5px 1px 6px #F93 }
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}
3、案例效果截图
谷歌浏览器效果截图
谷歌浏览器文字阴影实例效果截图
4、说明
此案例设置对两个盒子分别设置了阴影案例，前者阴影范围设置比较大，体感音乐放松椅颜色为桔黄色；后者设置1px范围大小颜色为黑色的阴影。
5、在线演示：
查看案例（在IE9及以上浏览器看效果）
查看案例
6、打包下载：
立即下载（1.706KB）
三、总结说明 - TOP
1、浏览器兼容
此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。
CSS3兼容截图
CSS3兼容截图
2、对应CSS3手册
http://www.divcss5.com/css3/text-shadow.html
3、因为兼容性，CSS3属性在IE9以下IE浏览器不支持不兼容，所以设置后只有IE9以上浏览器兼容，所以使用时候慎重选择。