css3 text-shadow_html/css_WEB-ITnose

一、text-shadow

text-shadow: h-shadow v-shadow blur color;

text-shadow: 水平阴影 垂直阴影 模糊半径 color;

h-shadow和v-shadow可取负值，blur只能取正值。

二、使用

1、基础

霓虹灯效果的文本阴影
文本水平垂直阴影效果
白色文本阴影效果

2、浮雕效果

使用浮雕效果，模糊值必须设为0来增加质感。

浮雕效果

3、模糊效果

使用text-shadow制作模糊效果注意一点：把文本的前景色设置为透明，即transparent，模糊值越大效果越模糊。

模糊效果

4、内凹效果

注意：文字的前景色要比背景色暗，阴影颜色稍微比背景色亮一点点，这一步很重要，如果阴影颜色太亮会看起来很怪，如果太暗又没有效果。

inset效果是文本的影子效果，也是一种常见的效果，给人一种微妙的突出效果。

内凹效果

5、描边效果

原理：使用两个阴影，一个左上，一个右下，且不用模糊值。

描边效果

6、3d效果

3D文字效果运用原理就是像Photoshop一样，我们在文字的下方或上方复制了多个图层，并把每一个层向左上或右下方向移动一个1px距离，从而制作 出3D效果。同时我们层数越多，其越厚重。换成用text-shadow制作就是使用多个阴影，并把阴影色设置相同，给其使用rgba色效果更佳。

3D效果

三、资源链接

http://www.cnblogs.com/lhb25/archive/2013/01/31/css3-text-shadow.html

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow