如何为文本添加阴影

为文本添加阴影

在我们的为盒子添加阴影的指南中，你可以了解如何为页面上的任意元素添加阴影。然而，那种技术只会为元素的外部盒子添加阴影。要为盒子内部的文本添加投影，你需要使用不同的 CSS 属性 —— text-shadow。

text-shadow 属性包含多个值：

• x 轴方向的偏移量
• y 轴方向的偏移量
• 模糊半径
• 颜色

在下面的示例中，我们将 x 轴偏移设置为 2px，y 轴偏移设置为 4px，模糊半径为 4px，颜色为半透明蓝色。你可以尝试不同的值，看看阴影效果如何变化。

<div class="wrapper">
  <h1>为文本添加阴影</h1>
</div>

h1 {
  color: royalblue;
  text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
}