只要先理解text-shadow的原理，就能用定位元素进行效果的模仿。
text-shadow: h-shadiv v-shadov blur color
h-shadv为文本水平移动的距离，正值相对于当前位置向右，负值相对于当前位置向左；
v-shadov为文本垂直移动的距离，正值相对于当前位置向下，负值相对于当前位置向上；
blur为可选值。即模糊的距离。如果放在三维坐标系中，就是z值，离观察者的远近，浏览器中视觉上的效果就是清晰程度、颜色的浅淡程度；
color文本颜色设置；
经过以上分析，你知道，h-shadv、v-shadv、blur其实和一个相对定位元素的属性很像，其实说白了就是一样的。这样去理解以下代码实现就不再会有问题。可以理解为第一个shadowed是母文本，第二个shadowed是阴影文本，第二个shadowed相对于第一个shadowed进行绝对定位，设置其top、left、z-index就可以模拟出阴影。
<!doctype html> <html> <head></head> <body> <!-- text-shadow属性自动产生阴影效果 --> <span style="text-shadow:5px 3px 1px; #888">shadowed</span> <!-- 这里我们利用定位可以产生相同的效果 --> <span style="position: relative;"> shadowed <!-- 投射阴影的文本 --> <span style="position:absolute;top:3px;left:5px;z-index:1;color:#888"> shadowed <!-- 这里是阴影 --> </span> </span> </body> </html>