css3文本阴影效果

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-04 19:01:35　-　阅:　-　评:0　-　积分:0

前面提到过css3中的阴影边框属性，其实在css3中也有文字的阴影属性，即text-shadow．目前时常能够看到一些web前端爱好者的个人博客中使用了阴影文字，下面以实例来进行补充说明．效果图：
css3文本阴影效果
源码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css3文本阴影效果--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="css3文本阴影,text-shadow,css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性">
<meta name="description" content="css3文本阴影,text-shadow,css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性">
<style>
div {
width: 500px;
height: 100px;
margin-bottom: 10px;
font-size: 30px;
font-family: Arial, sans-serif;
background: #666
}
.one {
text-shadow: 3px 3px 2px #000;
color: #fff;
}
</style>
</head>
<body>
<div class="one">text-shadow:3px 3px 2px #000;</div>
</body>
</html>

当然，text-shadow同圆角边框一样，也可以设置多个值，多个值之间用”,“隔开。如下图：
css3文本阴影效果
源码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css3文本阴影text-shadow--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="css3文本阴影,text-shadow,css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性">
<meta name="description" content="css3文本阴影,text-shadow,css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性">
<style>
div{
width: 500px;
height: 100px;
margin-bottom: 10px;
font-size: 30px;
font-family: Arial, sans-serif;
background: #666;
}
.one {
text-shadow: 3px 3px 2px #000;
color: #fff;
}
.two {
text-shadow: 0px 3px 1px #000, 3px 0px 0px #f00;
color: #fff;
}
</style>
</head>
<body>
<div class="one">text-shadow:3px 3px 2px #000;</div>
<div class="two">text-shadow:0px 3px 1px #000,3px 0px 0px #f00;</div>
<p>请在非<strong style="color:#f00">ie</strong>内核下浏览</p>
</body>
</html>

点此下载→→【代码】css3文本阴影text-shadow.zip　　　

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2013-08-04/71.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！