如何為非方形 PNG 圖片建立 CSS 陰影？

非方形 PNG 圖片的 CSS 投影效果

使用 CSS 為非方形 PNG 圖片建立投影效果可能很棘手。使用 box-shadow 屬性的標準方法會產生不遵循影像輪廓的方形陰影。

幸運的是，有一個使用 filter 屬性的解：

使用濾鏡：dropShadow()

濾鏡：dropShadow()屬性可讓你建立一個具有自訂偏移量和顏色的模糊陰影效果：

filter: drop-shadow(x y blur color);

其中：

• x 和 y表示陰影的水平和垂直偏移
• 模糊決定陰影的模糊半徑
• 顏色是陰影color

CSS範例：

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

內聯範例：

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="如何為非方形 PNG 圖片建立 CSS 陰影？" >

此技術可讓您建立精確遵循非方形PNG 影像形狀的陰影效果，賦予它們逼真的深度和效果維度。

以上是如何為非方形 PNG 圖片建立 CSS 陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！