如何為元素新增陰影
在本指南中，您可以找到如何為頁面上的任何框新增陰影的方法。
新增框陰影
陰影是常見的視覺設計元素，可以幫助元素在頁面上脫穎而出。在 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，這意味著陰影是預設的下拉陰影，框位於陰影的上方。插入陰影出現在框內部，就好像內容被推入頁面一樣。