如何给元素添加阴影

¥Adding box shadows

阴影是一种常见的设计功能，可以帮助元素在页面上脱颖而出。在 CSS 中，元素框上的阴影是使用 box-shadow 属性创建的（如果要向文本本身添加阴影，则需要 text-shadow）。

¥Shadows are a common design feature that can help elements stand out on your page. In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow).

box-shadow 属性有多个值：

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

• x 轴上的偏移量
• y 轴上的偏移量
• 模糊半径
• 扩散半径
• 一种颜色
• inset 关键字

在下面的示例中，我们将 X 轴和 Y 轴设置为 5 像素，模糊设置为 10 像素，扩散设置为 2 像素。我使用半透明的黑色作为我的颜色。尝试不同的值，看看它们如何改变阴影。

¥In the example below we have set the X and Y axes to 5px, the blur to 10px and the spread to 2px. I am using a semi-transparent black as my color. Play with the different values to see how they change the shadow.

注意：在本例中我们没有使用 inset，这意味着阴影是默认的阴影，框位于阴影顶部。插入阴影出现在框内，就好像内容被推回到页面中一样。

¥Note: We are not using inset in this example, this means that the shadow is the default drop shadow with the box on top of the shadow. Inset shadows appear inside the box as if the content were pushed back into the page.

¥See also

• 盒子阴影生成器
• 学习 CSS：高级样式效果。