SVG切片9种方法

保罗·刘易斯（Paul Lewis）制作了3D卡翻转动画。 在那里很简单，但这也需要一个阴影元素：

阴影可能需要移动或淡入淡出，因此我们需要一种可以对变换和不透明度进行动画处理的解决方案，因为它们可以移交给GPU。 它需要与阴影元素分开，因为我们可能希望淡出并移动它而不影响其他元素。

他尝试了box-shadow和filter: blur() ，但是两者的性能都不够。

他尝试了使用带有模糊滤镜的SVG元素，但仅SVG不能完成9切片缩放（必须防止拐角缩放变得笨拙）。

获胜者使用的是SVG图像，但通过border-image将其应用于元素，这实际上是9切片缩放。

直接连结→

翻译自: https://css-tricks.com/slicing-svg-9-ways/