[分享]css3文本投影

CSS3文本投影可以让文本看起来更立体、有层次感。它采用的是利用阴影来模拟文字凸出的效果，从而使文本更加生动有趣。textshadow: hshadow vshadow blur color; 其中h...

CSS3文本投影可以让文本看起来更立体、有层次感。它采用的是利用阴影来模拟文字凸出的效果，从而使文本更加生动有趣。

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

其中h-shadow和v-shadow是水平方向和垂直方向的阴影偏移距离，blur是阴影的模糊程度，color则是用来定义阴影的颜色。例如，下面的代码可以让文本产生黑色阴影效果：

text-shadow: 2px 2px 2px #000; 

此外，我们还可以为文本看起来更加醒目，添加一个白色的外层阴影。代码如下：

text-shadow: 1px 1px 0 #fff,
             -1px -1px 0 #fff,
             1px -1px 0 #fff,
             -1px 1px 0 #fff; 

这段代码实际上是定义了四个阴影。第一个阴影向右下偏移了一个像素，并且模糊程度为0，颜色为白色；第二个阴影向左上偏移了一个像素，模糊程度同样为0，颜色也是白色。第三个阴影向右上偏移了一个像素，模糊程度为0，颜色为白色。最后一个阴影向左下偏移了一个像素，模糊程度为0，颜色同样为白色。这些阴影组合在一起，形成一个亮色的光晕效果，可以让文本看起来更加立体鲜明。

总的来说，CSS3文本投影是一项非常有趣的设计技巧，可以用来设计出各种各样生动有趣的文本效果，让页面可以更加生动有趣。同时，它也是CSS3技术中的一项非常重要的技能之一。