CSS 盒子陰影
CSS box-shadow 屬性
CSS box-shadow 屬性用於為元素應用一個或多個陰影。
指定水平和垂直陰影
在最簡單的用法中，你只需指定一個水平陰影和一個垂直陰影。陰影的預設顏色是當前的文字顏色。
帶有 box-shadow 的 <div> 元素
為陰影指定顏色
color 引數定義了陰影的顏色。
帶有淺藍色 box-shadow 的 <div> 元素
為陰影新增模糊效果
blur 引數定義了模糊半徑。數字越大，陰影就會越模糊。
帶有 5px 模糊、淺藍色 box-shadow 的 <div> 元素
設定陰影的擴散半徑
spread 引數定義了擴散半徑。正值會增大陰影的大小，負值會減小陰影的大小。
帶有模糊、淺藍色 box-shadow 和 12px 擴散半徑的 <div> 元素
設定 inset 引數
inset 引數將陰影從外陰影（outset）更改為內陰影。
帶有模糊、淺藍色、inset box-shadow 的 <div> 元素
新增多個陰影
元素也可以擁有多個陰影
卡片
你還可以使用 box-shadow 屬性來建立紙質卡片效果
1
2021 年 1 月 1 日
Hardanger, Norway
示例
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
試試看（文字卡片） » 試試看（圖片卡片） »CSS 陰影屬性
下表列出了 CSS 陰影屬性
| 屬性 | 描述 |
|---|---|
| box-shadow | 為元素新增一個或多個陰影 |
| text-shadow | 為文字新增一個或多個陰影 |
