AI 摘要：本文是关于 CSS shape() 函数的第二部分，专注于 arc 命令的使用，探讨如何通过该命令创建复杂的形状，如扇形（Sector）和弧形（Arc）。作者详细介绍了如何使用 arc 命令绘制动态形状，解决绘制过程中的常见问题（如弧的方向和大小选择），并结合 CSS 条件逻辑和变量优化代码。本文还提到 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持，适合对 CSS 高级特性感兴趣的开发者学习。

• 支持环境与背景：文章指出 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持（截至 2025 年 5 月），并作为系列文章的第二部分，建议读者先阅读第一部分以理解基础知识。
• 扇形（Sector Shape）：
• 描述：扇形是一种常用于饼图的经典形状，包含一个弧和两个固定点，以及一个随填充比例变化的移动点。
• 实现：通过 shape() 函数从顶部开始绘制弧线（arc to），使用变量 --v（范围 0-100）控制填充比例，并通过数学公式计算弧线终点坐标（X 和 Y）。
• 问题与解决：弧线绘制中遇到方向和大小问题，需通过尝试 small cw 和 large cw 组合解决；当 --v 接近 100 时，弧线无法形成完整圆形，作者通过限制值为 99.99 并添加 border-radius: 50% 解决。
• 应用：可用于图像元素的 clip-path，增强视觉效果。
• 弧形（Arc Shape）：
• 描述：基于扇形，移除内部填充部分，形成纯弧形，适用于创建环形效果。
• 实现：基于扇形代码，移除 line to center，增加内弧线命令，并通过变量 --b 定义弧线厚度。
• 问题与解决：与扇形类似，弧线大小随 --v 变化需调整为 small 或 large ，作者引入 CSS 条件逻辑（如 if() 或样式查询）动态调整弧线参数。
• 优化：移除 border-radius，通过条件逻辑同时解决内外弧线问题。
• 带圆角的弧形（Arc Shape with Rounded Edges）：
• 描述：通过在弧形两端添加小半圆弧，创建圆角效果，提升视觉美感。
• 实现：将直线命令替换为小半圆弧（使用 1% 半径技巧让浏览器自动计算），并在末尾添加额外弧线回到起点。
• 练习：作者鼓励读者自行尝试修改代码，理解四弧结构。
• 总结与展望：
• 总结：作者强调 arc 命令是 shape() 函数中最复杂的部分，重点在于方向和大小的处理，通过两篇文章详细讲解，希望读者能掌握其用法。
• 补充：仅讨论了圆弧，未深入探讨椭圆弧（需两个半径），认为其应用较少；并推荐读者阅读作者在 Frontend Masters 的后续文章，探索更多基于 arc 的花式形状。

CSS-Tricks

Better CSS Shapes Using shape() — Part 2: More on Arcs | CSS-Tricks

This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command.