如何使用 CSS3 建立 SVG 投影？

使用 CSS3 的 SVG 投影

使用 CSS3 實現投影

可以使用 CSS3 向 SVG 元素添加投影效果。與先前的 box-shadow 或 -webkit-box-shadow 屬性相反，現代方法涉及利用 CSS 過濾器屬性。

使用CSS 過濾器屬性

受到webkit、Firefox 等流行瀏覽器的支援34 和Edge 一樣，CSS 濾鏡屬性提供了用於投影效果的專用語法：

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));

應用Drop陰影效果

將濾鏡屬性套用到有「.shadow」類別的SVG 元素：

.shadow {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

陰影效果將應用於任何帶有「.shadow」的 SVG 元素類，包括圖像、形狀和群組。陰影的外觀可以透過調整濾鏡函數中的值來自訂。

跨瀏覽器相容性

雖然過濾器屬性本身提供了出色的支持，但您可能需要針對 FF 等舊版瀏覽器的 Polyfill

以上是如何使用 CSS3 建立 SVG 投影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！