如何為元素新增陰影

本指南介紹如何為頁面上的任何框新增陰影。

新增框陰影

陰影是常見的網頁設計功能，可以幫助元素在頁面上脫穎而出。在 CSS 中，使用 box-shadow 屬性可以為元素的框新增陰影（如果你想為文字本身新增陰影，你需要使用 text-shadow）。

box-shadow 屬性接受多個值

在下面的示例中，我們已將 X 和 Y 軸設定為 5px，模糊設定為 10px，擴散設定為 2px。我使用半透明黑色作為顏色。嘗試不同的值，看看它們如何改變陰影。

注意： 在此示例中，我們未使用 inset，這意味著陰影是預設的投射陰影，框位於陰影之上。內陰影出現在框內，就像內容被推回頁面一樣。