如何使用 CSS3 濾鏡建立 SVG 陰影？-css教學-PHP中文網

如何使用 CSS3 濾鏡建立 SVG 陰影？

Barbara Streisand

發布： 2024-12-19 13:38:09

原創

431 人瀏覽過

How Can I Create SVG Drop Shadows Using CSS3 Filters?

使用CSS3 的SVG 投影

使用CSS3 為SVG 元素創建投影可能看起來很混亂，特別是考慮到缺乏對傳統的直接支援box-shadow 和-webkit-box-shadow 屬性。但是，有一個使用 CSS 過濾器的可行解決方法。

使用 CSS 濾鏡

CSS 濾鏡提供了一種將視覺效果應用於 SVG 元素的方法。若要使用此方法建立投影，您可以將 filter 屬性與 drop-shadow() 結合使用函數。

語法

.element {
  filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
}

登入後複製

範例

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

登入後複製

相容性相容性

相容性

Edge

對於不支持drop-shadow() 濾鏡的瀏覽器，您可以使用填充。一種流行的 Polyfill 是 [CSS Shadow](https://github.com/mdn/css-shadow)，它提供對 Firefox

套用投影

您可以將投影應用於任何 SVG 元素。只需將陰影類別加入元素即可：

<svg>
  <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

登入後複製

結論

使用CSS 過濾器，您可以用最少的編碼工作為SVG 元素建立陰影。該技術與現代瀏覽器相容，並支援使用 polyfill 進行跨瀏覽器渲染。

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