使用CSS文字阴影创建有趣的效果

让我们来看看如何使用CSS的text-shadow属性来创建真正的3D文本。你可能会认为text-shadow是能够在文字后面涂上模糊的、渐变的颜色，你是对的！但就像box-shadow一样，你可以控制阴影的模糊程度，包括将阴影全部带入到文本中。结合逗号分隔阴影和堆叠阴影，这就是我们在这里要做的CSS技巧。

text-shadow快速复习

语法如下：

.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 实例来创造深度，