如何为文本添加阴影
在本指南中，您将学习如何为页面上的任何文本添加阴影。
为文本添加阴影
我们关于为框添加阴影的指南解释了如何为页面上的任何元素添加阴影。但是，该技术仅为元素的周围框添加阴影。要为文本本身添加投影，您需要一个不同的 CSS 属性：text-shadow。
text-shadow 属性接受多个值
- X 轴偏移量
- Y 轴偏移量
- 模糊半径
- 颜色
在下面的示例中，我们将 X 轴偏移量设置为 2px，Y 轴偏移量设置为 4px，模糊半径设置为 4px，颜色设置为半透明蓝色。尝试不同的值，看看它们如何改变阴影效果。
html
<div class="wrapper">
<h1>Adding a shadow to text</h1>
</div>
css
h1 {
color: royalblue;
text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
}
注意： 添加文本阴影时，您可能会无意中使文本难以阅读。确保您的选择提供了足够的颜色对比度，以保持文本可读。