CSS Box Shadow

CSS box-shadow 屬性

CSS box-shadow 屬性應用陰影于元素。

最簡單的用法是只指定水平陰影和垂直陰影：

帶有黑色 box-shadow 的黃色 <div> 元素

實例

div {
  box-shadow: 10px 10px;
}

親自試一試

接下來，為陰影添加顏色：

帶有灰色 box-shadow 的黃色 <div> 元素

實例

div {
  box-shadow: 10px 10px grey;
}

親自試一試

接下來，向陰影添加模糊效果：

黃色的 <div> 元素，帶有模糊的 box-shadow

實例

div {
  box-shadow: 10px 10px 5px grey;
}

親自試一試

卡片

您還可以使用 box-shadow 屬性創建紙質卡片效果：

1
January 1, 2021
Coffee
Coffee

實例

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 在文本中添加一個或多個陰影。