AI 摘要：本文是关于 CSS shape() 函数系列教程的第三部分，重点介绍了 curve 命令的使用及其在创建复杂 CSS 形状中的重要性。作者通过详细的示例和对比，解释了 curve 命令如何通过贝塞尔曲线控制点来绘制曲线，并与 arc 命令进行了对比，探讨了两者的适用场景。此外，文章还展示了如何利用 curve 命令创建不规则形状的圆角效果，包括倾斜边缘、箭头形状和多边形等复杂图形，并提供了实用的代码和技巧，帮助读者快速上手。

1. 系列背景与概述
本文是 CSS shape() 函数系列的第三部分，前两部分已介绍线条 (lines) 和弧线 (arcs)，本部分聚焦于曲线 (curves)，强调 curve 命令是掌握 shape() 函数全功能的关键。

2. Curve 命令详解
• 介绍了 curve 命令的基本概念，即通过指定控制点在两点间绘制贝塞尔曲线，可分为二次曲线（一个控制点）和三次曲线（两个控制点）。
• 简化了贝塞尔曲线的复杂理论，重点放在实用性上，避免深入数学细节，鼓励通过示例学习。
• 提供了 curve 命令的语法结构，例如 clip-path: shape(from Xa Ya, curve to Xb Yb with Xc Yc)，并解释了控制点的相对与绝对坐标的使用。

3. Arc 与 Curve 命令对比
• 对比了 arc 和 curve 命令在创建圆角时的异同，指出 arc 命令更适合规则圆弧，而 curve 命令适用于更灵活的曲线效果。
• 通过具体代码和图形示例，展示了两种命令在同一形状上的不同效果，帮助读者理解选择依据。
• 强调选择命令时的灵活性，建议优先尝试 arc，若不适用再转向 curve。

4. Curve 命令的实用案例
• 倾斜边缘 (Slanted Edge)：展示了如何从直角矩形转换为带有圆角倾斜边缘的形状，详细讲解了使用 curve 命令替换 line 命令的步骤，并通过 CSS 变量简化复杂计算。
• 箭头形状 (Arrow-shaped Box)：通过三个圆角的箭头形状示例，说明了 curve 命令在多点圆角设计中的应用，强调即使不擅长数学，也可以通过试错法调整坐标。
• 圆角多边形 (Rounded Polygons)：介绍了如何利用 curve 命令创建圆角多边形（如五边形、六边形），并结合 Sass 和 CSS 变量实现可控性和动画效果，同时提供了在线生成工具供参考。

5. 结论与后续资源
• 总结了 curve 命令的潜力及其在复杂形状设计中的作用，承认代码复杂性，但强调通过作者提供的在线资源和工具可轻松获取代码。
• 推荐了进一步学习资源，如作者在 Frontend Masters 上的文章，涉及使用 curve 命令创建 blob 形状。

CSS-Tricks

Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.