CSS drop-shadow() 函數

定義和用法

CSS 的 drop-shadow() 濾鏡函數為圖像應用投影效果。

為圖像添加不同的投影效果：

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

為圖像添加不同的投影效果（使用負值的水平和垂直陰影）：

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

值	描述
h-shadow	必需。指定水平陰影的像素值。負值將陰影放置在圖像的左側。
v-shadow	必需。指定垂直陰影的像素值。負值將陰影放置在圖像的上方。
blur	可選。為陰影添加模糊效果，單位為像素。值越大，模糊效果越強（陰影會變得更大且更淡）。不允許使用負值。如果未指定值，則默認為 0（陰影邊緣清晰）。
spread	可選。必須為像素值。正值會使陰影擴展并變大，負值會使陰影縮小。如果未指定，則默認為 0（陰影與元素大小相同）。
color	可選。為陰影添加顏色。如果未指定，顏色取決于瀏覽器（通常為黑色）。

版本：	CSS Filter Effects Module Level 1

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome	Edge	Firefox	Safari	Opera
18	12	35	6	15