让我们看一下如何使用css text-shadow属性创建真正的3d文本。您可能会认为文本阴影可以在文本后面应用模糊，渐变的颜色，这是正确的！但是，就像盒子阴影一样，您可以控制阴影的模糊程度，包括将阴影一直降低到完全不模糊。结合使用逗号分隔的阴影并将其堆叠在一起，这就是我们在这里要做的css技巧。
到最后，我们将得到如下所示的内容：
＃在文本阴影上快速复习语法如下：
.el {
text-shadow: [x-offset] [y-offset] [blur] [color];
}x-offset：在x轴上的位置。正值将阴影向右移动，负值将阴影向左移动。（需要）y-offset：在y轴上的位置。正值将阴影移到底部，负值将阴影移到顶部。（需要）blur：阴影应该有多少模糊。值越高，阴影越柔和。默认值为0px（无模糊）。（可选的）color：阴影的颜色。（需要）网站建设
＃第一个阴影让我们通过仅添加一个阴影开始创建效果。阴影将向右推6px，向底部推6px：
:root {
--text: #5362f6; /* blue */
--shadow: #e485f8; /* pink */
}
?
.playful {
color: var(--text);
text-shadow: 6px 6px var(--shadow);
}
＃创建更多阴影的深度此时，我们所拥有的只是一个平坦的阴影-还没有太多的3d效果。通过将更多text-shadow实例添加到同一元素，我们可以创建深度并将阴影连接到实际文本。它所要做的就是用逗号分隔它们。让我们从中间添加一个开始：
.playful {
color: var(--text);
text-shadow: 6px 6px var(--shadow),
3px 3px var(--shadow);
}
这已经到达了某个地方，但是我们需要添加一些阴影使其看起来更好。我们添加的步骤越多，最终结果将越详细。在此示例中，我们将从6px 6px开始，并以0.25px的增量逐渐减小，直到达到0。
.playful {
color: var(--text);
text-shadow:
6px 6px var(--shadow),
5.75px 5.75px var(--shadow),
5.5px 5.5px var(--shadow),
5.25px 5.25px var(--shadow),
5px 5px var(--shadow),
4.75px 4.75px var(--shadow),
4.5px 4.5px var(--shadow),
4.25px 4.25px var(--shadow),
4px 4px var(--shadow),
3.75px 3.75px var(--shadow),
3.5px 3.5px var(--shadow),
3.25px 3.25px var(--shadow),
3px 3px var(--shadow),
2.75px 2.75px var(--shadow),
2.5px 2.5px var(--shadow),
2.25px 2.25px var(--shadow),
2px 2px var(--shadow),
1.75px 1.75px var(--shadow),
1.5px 1.5px var(--shadow),
1.25px 1.25px var(--shadow),
1px 1px var(--shadow),
0.75px 0.75px var(--shadow),
0.5px 0.5px var(--shadow),
0.25px 0.25px var(--shadow);
}
＃使用sass简化代码结果可能看起来不错，但是现在的代码很难阅读和编辑。如果要使阴影变大，则必须进行大量复制和粘贴才能实现。例如，将阴影大小增加到10px将意味着手动添加16个阴影。
这就是scss出现的地方。我们可以使用函数来自动生成所有阴影。
@function textshadow($precision, $size, $color){
$value: null;
$offset: 0;
$length: $size * (1 / $precision) - 1;
?
@for $i from 0 through $length {
$offset: $offset + $precision;
$shadow: $offset + px $offset + px $color;
$value: append($value, $shadow, comma);
}
?
@return $value;
}
?
.playful {
color: #5362f6;
text-shadow: textshadow(0.25, 6, #e485f8);
}该函数textshadow采用三个不同的参数：阴影的精度，大小和颜色。然后，它创建一个循环，使偏移量增加$precision（在这种情况下为0.25px），直到达到阴影的总大小（在这种情况下为6px）为止。
这样，我们可以轻松增加阴影的大小或精度。例如，要创建一个10px大且增加0.1px的阴影，我们只需在代码中进行更改即可：
text-shadow: textshadow(0.1, 10, #e485f8);＃交替颜色我们想通过选择其他颜色来使事情变得有趣。我们将文本分成多个字母，并用span包裹起来（可以手动完成，也可以使用react或javascript自动化）。输出将如下所示：
<p class=playful aria-label=wash your hands!>
<span aria-hidden=true>w</span><span aria-hidden=true>a</span><span aria-hidden=true>s</span><span aria-hidden=true>h</span> ...
</p>然后，我们可以:nth-child()在跨度上使用选择器来更改其文本和阴影的颜色。
.playful span:nth-child(2n) {
color: #ed625c;
text-shadow: textshadow(0.25, 6, #f2a063);
}
如果我们在原始css中完成此操作，那么最终结果是：
.playful span {
color: var(--text);
text-shadow:
6px 6px var(--shadow),
5.75px 5.75px var(--shadow),
5.5px 5.5px var(--shadow),
5.25px 5.25px var(--shadow),
5px 5px var(--shadow),
4.75px 4.75px var(--shadow),
4.5px 4.5px var(--shadow),
4.25px 4.25px var(--shadow),
4px 4px var(--shadow),
3.75px 3.75px var(--shadow),
3.5px 3.5px var(--shadow),
3.25px 3.25px var(--shadow),
3px 3px var(--shadow),
2.75px 2.75px var(--shadow),
2.5px 2.5px var(--shadow),
2.25px 2.25px var(--shadow),
2px 2px var(--shadow),
1.75px 1.75px var(--shadow),
1.5px 1.5px var(--shadow),
1.25px 1.25px var(--shadow),
1px 1px var(--shadow),
0.75px 0.75px var(--shadow),
0.5px 0.5px var(--shadow),
0.25px 0.25px var(--shadow);
}
?
.playful span:nth-child(2n) {
--text: #ed625c;
--shadow: #f2a063;
}我们可以使用其他颜色和索引重复相同的几次，直到获得我们喜欢的图案：
＃奖励积分：添加动画使用相同的原理，我们可以通过添加动画