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