AI 摘要：本文是作者关于使用 CSS 锚点定位技术连接圆圈系列的第二部分，主要关注在连接两个圆圈的箭头内部计算并显示它们之间的距离。文章展示了改进后的 HTML 结构和 CSS 变量定义，并通过交互式 CodePen 示例演示了拖动圆圈时距离实时更新的效果，但目前该功能仅支持 Chrome 浏览器。

1. 引言与目的
• 前言回顾：基于前一篇关于连接圆圈的实现。
• 核心改进：在箭头形状内增加计算并显示两个圆圈之间距离的功能。
2. 技术实现细节
• HTML 结构：展示了使用 div 元素分别表示圆圈 (circle) 和连接箭头 (arrow) 的基本结构，其中 arrow 元素通过 x, y 等属性引用圆圈。
• CSS 变量：定义了用于控制箭头尺寸（--r, --a, --d）、圆圈与箭头间距（--g）以及颜色（--c）的关键 CSS 变量。
3. 交互式演示与局限性
• 实时更新：通过 CodePen 演示，用户可以拖动圆圈，观察距离值如何在箭头内部实时更新。
• 多圆圈示例：提供了一个包含多个圆圈的 CodePen 演示，展示了该技术在更复杂场景下的应用潜力。
• 浏览器兼容性：目前该功能仅在 Chrome 浏览器中支持。
4. 相关资源与拓展阅读
• 前作链接：提供了《Connecting Circles With Anchor Positioning》的链接，方便读者了解原始实现。
• 其他 CSS 技巧：列举了作者的其他 CSS 技巧文章，如《Fizz Buzz using Modern CSS (no HTML)》。

Css-Tip

Connecting Circles With Anchor Positioning II

Connect circles with arrows and show their distance using modern CSS