一、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