可以使用 CSS3 向 SVG 元素添加投影效果。与之前的 box-shadow 或 -webkit-box-shadow 属性相反，现代方法涉及利用 CSS 过滤器属性。
受到 webkit、Firefox 等流行浏览器的支持34 和 Edge 一样，CSS 滤镜属性提供了用于投影效果的专用语法：
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
将滤镜属性应用到带有“.shadow”类的 SVG 元素：
.shadow {
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}阴影效果将应用于带有“.shadow”的任何 SVG 元素类，包括图像、形状和组。阴影的外观可以通过调整过滤器函数中的值来自定义。
虽然过滤器属性本身提供了出色的支持，但您可能需要针对 FF 等旧版浏览器的 Polyfill
以上是如何使用 CSS3 创建 SVG 投影？的详细内容。更多信息请关注PHP中文网其他相关文章！
