任鸟飞网站设计博客

随着CSS3的推广，以及越来越多的浏览器开始支持CSS3标准，CSS3得到众多网页设计者的垂青。以往众多利用图片才能实现的效果，现在利用CSS3也能实现。

一. 利用CSS3制作字符阴影特效

Text Shadow （字符阴影）是目前CSS3中应用较多的一个属性，下面先看一个利用CSS3制作的字符阴影特效。

预览：在CSS3与Photoshop中对比学习（Text Shadow）字符阴影

制作上述效果的代码如下

HTML：

<h1>任鸟飞网页设计博客 <br />www.renniaofei.com</h1>

CSS代码：

body {
  background-color: #ddd;
  font-family: "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
  margin: 50px;
  color: #333;
  text-align: center;
}
h1 {
  font-size: 60pt;
  text-shadow: #fff 0px 1px 0px;
}

代码说明：

实现Text shadow （字符阴影）的CSS代码为 text-shadow: #fff 0px 1px 0px; 这段代码代表阴影颜色为#fff ，x方向偏移为0px，y方向便宜1px，模糊程度0px，更加具体的说明可参考常用CSS3新增属性。

二. 利用Photoshop制作字符阴影特效

具体Photoshop中的设置如上所示，这里需要注意的几点如下：

• 混合模式：正常
• 不透明度尽量设置成：100%
• 角度：90

总结：

对比CSS3与Photoshop中有关字符阴影的设置之后，也就很容易理解CSS3的 Text Shadow 属性了。
只需一条CSS3的text shadow属性就能制作出字符阴影的效果，还不赶快试一下！