如何在 CSS 中為不規則 PNG 圖像建立陰影？

在CSS 中對不規則PNG 影像應用投影

為具有不規則形狀的PNG 影像創建投影效果可能會帶來挑戰創建投影效果可能會帶來挑戰使用標準CSS box-shadow 屬性。這是因為 box-shadow 在圖像周圍添加了方形陰影，與圖像中物體的形狀不符。

解決方案：使用 CSS 濾鏡屬性

要為不規則形狀的 PNG 圖片添加陰影，我們可以使用 CSS 濾鏡屬性和 dropShadow() 函數。此函數採用四個參數：x 偏移、y 偏移、模糊半徑和顏色。

範例程式碼

以下是如何應用下降的範例使用dropShadow() 函數新增陰影：

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

在此範例中，我們應用了投影在x 和y 方向上都有5 像素偏移、5 像素模糊半徑和黑色(#222)。

內聯樣式

您也可以套用內聯陰影，使用style 屬性：

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"
style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

使用dropShadow() 函數允許您建立精確遵循PNG 影像形狀的投影，提供更具視覺吸引力和真實感的效果。

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