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;
}

代码演示:

202101211611222141137664