使用text-shadow属性可以实现文字阴影效果，具体实例如下：
|
0 1 2 3 |
<style><!-- .z_z {font-size: 44px;font-weight: 800;} .shadow{text-shadow: -1px 2px 3px #000;} --></style> <div class="shadow z_z">CSS实现文字阴影的方法</div> |
CSS实现文字阴影效果的方法
解释一下text-shadow的语法:
text-shadow:color length length length;
color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上。
扩展：
下面有一些特效，可以借鉴。
3D Text(3D立体效果)
3D文字效果，只是多次应用了CSS3中的text-shadow属性，进行多次阴影设置，并设置不同的阴影色，从而达到一个立体的文字效果。
|
0 1 2 3 4 5 6 7 8 |
h2.text3D { text-align: center; background-color: #ccc; line-height: 6rem; color: #fff; font-size: 44px; font-weight: 800; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25); } |
CSS实现文字阴影效果的方法
Neon Lights Effect(霓虹灯效果)
霓虹灯效果主要是多次使用text-shadow属性制作阴影，只是这里有一点需要注意，在制作阴影时不设置任何X轴和Y轴的值，只是设置其模糊半径值，并且每次的blur半径取值不同，而且后面的值总是比前面的值大。
|
0 1 2 3 4 5 6 7 8 |
h2.neonText { text-align: center; background-color: #ccc; line-height: 6rem; font-size: 44px; font-weight: 800; color: #fff; text-shadow:0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816 } |
CSS实现文字阴影效果的方法
Letterpress Effect (凸版效果)
Letterpress Effect和前面的Inset Effect效果很相似，不同之处是Lefferpress使用模糊值产生一种立体效果。这种效果一般配合在有纹理的背景下使用。
|
0 1 2 3 4 5 6 7 8 |
h2.letterpressText { text-align: center; background-color: #333; line-height: 6rem; font-size: 44px; font-weight: 800; color: #222; text-shadow: 0px 2px 3px #555; } |
CSS实现文字阴影效果的方法
Emboss Effect(浮雕效果)
采用上下不同色调，亮色为上，暗色为下，制作出浮雕效果
|
0 1 2 3 4 5 6 7 8 |
h2.emboss{ text-align: center; background-color: #ccc; line-height: 6rem; font-size: 44px; font-weight: 800; color: #ddd; text-shadow: -1px -1px #fff, 1px 1px #333; } |
CSS实现文字阴影效果的方法
Blury Effect(模糊效果)
模糊效果是将前景色设置为透明，然后给其加上text-shadow，并只进行模糊度的设置
|
0 1 2 3 4 5 6 7 8 9 10 |
h2.blury{ text-align: center; background-color: #ccc; line-height: 6rem; font-size: 44px; font-weight: 800; .blury h2 { color: transparent; text-shadow: 0 0 4px #f36; } } |
CSS实现文字阴影效果的方法
就抄这些吧。源链接：http://www.w3cplus.com/css3/text-effect