标签：
以前，阴影效果通常是图像，但是有了CSS3，就可以直接使用text-shadow属性实现阴影。 该属性具有两个生成阴影和模糊主体的角色。 这样就可以在不需要图像的情况下赋予文字质感。
基本语法：
text-shadow:none|[none|[，]*或none|，]*
也就是说：
文本-阴影： [颜色(x轴) XOffset ) y轴)模糊半径blur]，[颜色(Color ) x轴) XOffset ) y轴) YOffset ) .
或者
text-shadow:[x轴(XOffset ) y轴) YOffset (模糊半径) Blur )颜色]，[x轴(XOffset ) y轴) YOffset (模糊半径) Blur )颜色] .
取值范围：
:的长度值。 可以指定负值。 指定阴影的延伸距离。 其中X offset是水平偏移值，Y Offset是垂直偏移值。
指定：阴影的颜色。 也可以选择rgba透明色
:阴影模糊值。 指定模糊效果的作用距离不能为负值。
如下图所示。
简要说明：
您可以将一个或多个阴影效果应用于对象，用逗号分隔，如前一语法所示。 text-shadow : x-offsety-offsetblurcolor的x-offset表示阴影的水平偏移距离，如果其值为正值，则阴影向右侧偏移，如果其值为负值，则阴影向左侧偏移； Y-Offset是阴影的垂直偏移距离，如果值为正值，则阴影向下偏移，反之，如果值为负值，则阴影向上偏移。 bur是指阴影的模糊程度，其值不能为负值。 值越大，阴影越模糊，反而阴影越清晰。 如果不需要阴影模糊，请将Blur值设置为0。 颜色是阴影的颜色，可以使用rgba颜色。
. demo
{
background:#666666；
width:440px；
padding:30px；
font : bold 55px/100 % ' Microsoft Yahoo '，' LucidaGrande '，Arial，Sans；
color:#fff；
text-transform:uppercase；
}
然后，为每个Demo添加自己的样式。 分别如下。
. demo1
{
text-shadow:red01px0；
}
效果1 ) Glow and Extra Glow effect (即NEON effect ) )。
. demo1
{
文本-阴影：0020 px red；
}
辉光效果设定比较大的模糊半径以提高辉光效果。 通过改变模糊半径可以获得不同的效果。 当然，您也可以同时增加几个不同的半径值以产生不同的阴影效果。 就像下一个NEON效应一样。
. demo1{ text-shadow :005 px # fff、0010px#fff、0015px#fff、0040px#ff00de、0070px#ff00de； }
效果条纹文本效果
. demo1{ text-shadow :1 px1px0# f96、-1px-1px0#f96； }
虽然描边效果与Photoshop相比非常差，而且会出现断点，但在某些情况下，主要使用两个阴影，第一个投影在左上角，第二个投影在右下角。 请注意，描边阴影效果不会应用于模糊值。
效果3d文本效果
. demo1{
text-shadow :1 px1px rgba (197、223、248、0.8 )、
2px 2px rgba (197、223、248、0.8 )、
3px 3px rgba (197、223、248、0.8 )、
4 px4px rgba (197、223、248、0.8 )、
5px 5px rgba (197、223、248、0.8 )、
6px6pxrgba(197、223、248、0.8；
}
. demo1
{
text-shadow :-1px-1 px rgba (197，223，248，0.8 )，
-2px-2pxrgba(197、223、248、0.8 )、
-3px-3pxrgba(197、223、248、0.8 )、
-4px-4pxrgba(197、223、248、0.8 )、
-5px-5pxrgba(197、223、248、0.8 )、
-6px-6pxrgba(197、223、248、0.8 )；
}
3D文字效果的使用原理是，在字符下方或上方复制多个图层(如Photoshop )，然后将每个图层向左或向右移动1px以创建3D效果。 同时我们的层数越多，它就越厚。 使用多种阴影、相同的阴影颜色和rgba颜色，而不是使用text-shadow创建，效果更好，如上例所示。
使用text-shadow还可以设置许多效果，但此处不再赘述。 详情请参照以下链接。
标签：