环形导航本质是坐标变换与定位偏移，需用 transform: rotate() 配合绝对定位实现；关键在精确计算角度与偏移量，而非仅依赖 border-radius 或 flex/grid。
HTML 环形导航不是靠 border-radius 拉个圆角就能成的，它本质是「坐标变换 + 定位偏移」，直接硬套 flex 或 grid 会卡死在视觉错位上。
环形导航必须用 CSS transform: rotate() 配合绝对定位
浏览器不认“弧线布局”这个概念，所有环形效果都是把每个导航项先水平排开，再逐个绕中心点旋转并平移。关键不在“怎么画圆”，而在“怎么算角度和偏移量”。
- 假设环半径
r = 200px，共 8 个菜单项，则每个项间隔360° / 8 = 45° - 第
n项（从 0 开始）的旋转角度为rotate(45deg * n)，再用translate(r)推到圆周上 - 必须给父容器设
position: relative，子项用position: absolute，否则translate会相对视口偏移 - 别用
%做r，缩放时会失准；用px或rem更稳
移动端点击热区小、易误触，得手动扩大 hit area
环形排列后，按钮视觉尺寸没变，但实际可点击区域被旋转挤压，尤其在小屏上手指一碰就跳到隔壁项。
- 不要只加
padding，那会撑开旋转后的外轮廓，破坏环形感 - 改用
::before伪元素覆盖一层透明热区：content: ""; position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%) - 确保父容器有
overflow: visible，否则伪元素会被裁掉 - 真机测试时关掉 Chrome 的 “Emulate touch events”，否则热区表现和真实手指差异很大
IE11 和 Safari 13.1 以下不支持 transform-origin 在 rotate + translate 组合中的稳定表现
老版本 Safari 会把 transform-origin 当作整个 transform 链的起点，导致旋转中心漂移；IE11 则可能忽略 translate 的单位换算。
- 兼容方案：不用
transform-origin，统一用top/left手动计算坐标，配合 JS 动态写 inline style - 更轻量的 fallback：检测
CSS.supports('transform', 'rotate(1deg)')，不支持就降级为放射状直线排列（flex-direction: column+rotate单项） - 别信 autoprefixer 对
transform的补全——它只加前缀，不修逻辑缺陷
真正难的不是画出那个弧，而是让每个项在任意缩放、旋转、字体加载延迟下，都保持精确的弧上位置。多数人卡在第三步：没意识到 transform 是累积的，rotate 后再 translate，方向已经变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
