<p class="zw">在扁平化设计更受欢迎的今天，文本阴影被认为是一种过时的效果。但为了提升复杂背景中的文字可读性和深度，文本阴影<code>text-shadow</code>影仍不失为一种有效的方法。</p> <pre class="代码无行号"><code>h1 { text-shadow : 2px 2px 0 rgb(204,211,213); }</code></pre> <p class="zw">我们来打破<code>text-shadow</code>的规则。</p> <p class="zw">第一个<code>2px</code>是阴影的水平偏移量，第二个<code>2px</code>是阴影的垂直偏移量。在这个例子中，这两个值是一样的，可以根据效果改变。值越大，阴影就离文本越远。</p> <p class="zw">第三个值我们设定的是0，这是模糊半径。值越大，模糊半径越大，阴影越浅。</p> <p class="zw">最后的是设定阴影的颜色。我们可以设定半透明或者不透明颜色。如果你对RGB颜色不熟悉，可以参考后面的章节。</p> <p class="图"><img alt="1204.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/106.jpg" style="width: 1272px" width="1272"></p> <p class="图题">在这个例子中，我们仅为文本添加一个主要阴影效果。</p> <p class="zw">下面我们把垂直偏移改成<code>3px</code>，模糊半径改成<code>6px</code>，使阴影变得更柔和。</p> <pre class="代码无行号"><code>h1 { text-shadow : 2px 3px 6px rgb(204,211,213); }</code></pre> <p class="图"><img alt="1205.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/107.jpg" style="width: 1272px" width="1272"></p> <p class="图题">主要阴影比较柔和，这是因为我们将模糊半径从0调整为10。</p> <p class="zw">文本阴影的偏移可以设置成负值。我们把垂直偏移改成<code>-5px</code>，就好像向下移动光源，使阴影移动到文字上方。</p> <pre class="代码无行号"><code>h1 { text-shadow : 2px -3px 6px rgb(204,211,213); }</code></pre> <p class="图"><img alt="1206.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/108.jpg" style="width: 1272px" width="1272"></p> <p class="图题">通过改变水平和垂直偏移量，可以将阴影调整到文字的任何一侧。</p>
