css3实现文本阴影

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

h-shadow 必需，水平阴影的偏移位置，右偏是正方向

v-shadow 必需，垂直阴影的偏移位置，下偏是正方向

blur 可选，模糊的距离

color 可选，阴影颜色

注意：文本阴影 —可以指定多组数据，多组数据之间以逗号隔开

<div class="box1"> <span>HELLO</span> <span>WORLD</span> </div>
<div class="box2"> <span>HAPPY</span> <span>NEW</span> <span>YEAR</span> </div>

css：

:root {
  font-size: 50px;
}

/* 一个文本可以有多个阴影，用逗号间隔 */
.box1 span:first-child {
  text-shadow: 10px 20px 5px red, -10px -20px 3px skyblue
}

.box2 span:nth-of-type(2) {
  text-shadow: 0px -5px 5px aquamarine, 0px 5px 5px aquamarine, 5px 0 5px aquamarine, -5px 0 5px aquamarine;
}

代码演示：