如何为元素添加阴影
在本指南中，您可以找到如何为页面上的任何框添加阴影的方法。
添加框阴影
阴影是常见的视觉设计元素，可以帮助元素在页面上脱颖而出。在 CSS 中，元素框的阴影使用 box-shadow 属性创建（如果您想为文本本身添加阴影，则需要 text-shadow）。
box-shadow 属性接受多个值
- X 轴偏移量
- Y 轴偏移量
- 模糊半径
- 扩展半径
- 颜色
inset关键字
在下面的示例中，我们设置 X 和 Y 轴为 5px，模糊度为 10px，扩展度为 2px。我使用的是半透明的黑色作为颜色。尝试修改不同的值，看看它们如何改变阴影。
html
<div class="wrapper">
<button class="shadow">box-shadow</button>
</div>
css
.shadow {
box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}
注意：在此示例中，我们没有使用 inset，这意味着阴影是默认的下拉阴影，框位于阴影的上方。插入阴影出现在框内部，就好像内容被推入页面一样。