css3 文字加阴影 |颜色渐变css3动态

.阴影文字{
color: #fff;	/*设置文字颜色*/
font-size: 36px;	/*设置文字大小*/
text-shadow: 2px 2px 2px #000;	/*设置文字阴影*/
	}

使用时首先给文字设置颜色和字体大小，然后使用text-shadow属性设置阴影。text-shadow属性接受三个参数，依次为阴影的水平偏移、垂直偏移和模糊半径，如果需要多个阴影效果可以通过逗号分隔。

.多重阴影文字{
color: #fff;
font-size: 36px;
text-shadow: 2px 2px 2px #000, -2px -2px 2px #666;
	}

上面的代码实现了两个相反方向的阴影效果，一个向右下方偏移，一个向左上方偏移，可以通过调整偏移量和模糊半径实现更多种类的阴影效果。

需要注意的是，使用text-shadow属性时，浏览器对于不同颜色的阴影可能会有不同的显示效果，因此如果需要达到理想的效果，可以通过多个相同颜色的阴影叠加来实现。

.叠加阴影文字{
color: #fff;
font-size: 36px;
text-shadow: 2px 2px 2px #000, 2px 2px 0px #000;
	}

上面的代码实现了两层相同颜色的阴影效果，第一层偏移2px，模糊半径为2px；第二层偏移2px，模糊半径为0px，实现了比较厚重的阴影效果。

除了box-shadow属性以外，CSS3还提供了多种文字特效，可以根据需要进行灵活使用，为页面增加更多的动感和美感。