如何使用 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中文网其他相关文章！