如何给文字添加阴影

¥Adding shadows to text

在我们的 向盒子添加阴影的指南 中，你可以了解如何向页面上的任何元素添加阴影。然而，该技术仅向元素的周围框添加阴影。要向框内的文本添加阴影，你需要不同的 CSS 属性 - text-shadow。

¥In our guide to adding a shadow to boxes, you can find out how to add a shadow to any element on your page. However, that technique only adds shadows to the element's surrounding box. To add a drop shadow to the text inside the box you need a different CSS property — text-shadow.

text-shadow 属性有多个值：

¥The text-shadow property takes a number of values:

• x 轴上的偏移量
• y 轴上的偏移量
• 模糊半径
• 一种颜色

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

¥In the example below we have set the x-axis offset to 2px, the y-axis offset to 4px, the blur radius to 4px, and the color to a semi-transparent blue. Play with the different values to see how they change the shadow.

注意：使用文本阴影很容易使文本难以阅读。确保你所做的选择仍然使文本可读，并为难以阅读低对比度文本的访问者提供足够的 色彩对比。

¥Note: It can be quite easy to make text hard to read with text shadows. Make sure that the choices you make still leave your text readable and provide enough color contrast for visitors who have difficulty with low-contrast text.