阻力最小的 `-path`（第二部分）

In the previous chapter, we explored clip-path and its power to reshape elements, cutting through the rectangular constraints of traditional elements to create circles, polygons, and complex curved shapes. We learned how to think beyond the box (literally), but everything we covered was about static shapes. About defining boundaries and staying within them.

在上一章中，我们探讨了 clip-path 及其重塑元素的强大能力，突破了传统元素的矩形限制，创建圆形、多边形和复杂的曲线形状。我们学会了如何跳出“盒子”思考（字面意义上），但我们所涵盖的一切都是关于静态形状的。关于定义边界并保持在其中。

Now it’s time to break free from containment entirely. In this second part, we’re shifting from shapes that hold things in place to paths that guide movement. We’re moving from clip-path to offset-path, where your elements don’t get clipped into new shapes, they travel along custom routes.

现在，是时候彻底摆脱“容器”的束缚了。在第二部分中，我们将从固定形状转向引导运动的路径。我们将从 clip-path 转向 offset-path，让你的元素不再被裁剪成新形状，而是沿着自定义路线行进。

We talk about reduced motion for accessibility later in this post, but not all the demos in this post implement that media query as they are specifically demonstrating a concept. It’s up to you to figure out how best implement a reduced motion version of movement for your circumstances.

我们会在后文讨论无障碍的减弱动画，但本文中的并非所有演示都实现了该媒体查询，因为它们专门用于展示概念。如何为你的场景实现减弱动画版本，取决于你自己。

This isn’t about changing what your elements look like. It’s about changing how they move through space, creating motion that feels natural, intentional, and surprisingly expressive. Like these rounded squares moving along a heart-shaped path:

这并不是要改变元素的外观，而是要改变它们在空间中的移动方式，创造出自然、有意且令人惊喜的富有表现力的运动。就像这些圆角正方形沿着心形路径移动：

The above demo uses the shape() syntax which has less browser support than other features talked about in this series, like offset-path and clip-path.

上面的演示使用了 比本系列中讨论的其他特性（如 offset-path 和 clip-path）浏览器支持更少的 shape() 语法。

Let’s break down offset-path too. We already explored the concept of path extensively in the previous article, but what exactly does “offset” mean in this context?

让我们也拆解一下 offset-path。我们在上一篇文章中已经深入探讨了 path 的概念，但在这个上下文中，“offset” 到底指什么？

Here’s a crucial difference from what we’ve...