CSS3如何使用text-shadow

CSS3如何使用text-shadow

在运用CSS给页面中的文字添加样式的时候，有时为了文字的立体效果我们会给文字加一些阴影的效果。那么该如何的实现这种效果那？下面小编给大家分享一下

首先我们需要准备好需要加阴影的文字，如下图所示

然后我们给html的body加一些样式，去除padding与margin的默认值，如下图所示

接下来给li元素设置字体大小以及行高，如下图所示，以免等会设置阴影重叠了

接下来找到li的第一个，给其加text-shadow属性，如下图所示，上面是水平的阴影，下面是垂直的

然后我们在给第三个li设置阴影效果，你会看到阴影值设置了负数，这表明是内阴影

最后我们运行程序，你会看到如下图所示的阴影效果，怎么样是不是很有立体的效果

最后我们总结一下，给文字加阴影主要运用text-shadow属性，注意其值可以是负数