纯css实现带同步指示器的轮播图必须用radio+兄弟选择器，因css无法监听transform变化；指示器容器需flex+justify-content:center，圆点用aspect-ratio+gap控制，响应式应作用于容器本身。
纯 CSS 实现带指示器的轮播图，关键不在“能不能”，而在于「指示器是否要同步当前页」——如果只要静态圆点、不随滑动高亮，flex + justify-content: center 就够；但若要求点击跳转、自动播放时指示器实时响应，则必须引入 input[type="radio"] 或 JS 控制 class，CSS 本身无法监听 transform 值变化。
指示器容器必须用 display: flex + justify-content: center
很多开发者直接给分页器加 text-align: center，结果圆点左右不对称、最后一项被挤出视口。这是因为 text-align 对齐的是文本流，而圆点是块级元素，受 margin/flex 计算影响更复杂。
真正可控的是：
• 父容器设 display: flex + justify-content: center
• 圆点元素统一设 flex: 0 0 auto（禁止缩放、禁止增长）
• 用 gap: 8px 控制间距，比手动写 margin-right 更干净，且自动忽略最后一项
• 避免 float 或 inline-block，会破坏 flex 布局逻辑
圆点尺寸和高亮态不能靠 width/height 硬写
写死 width: 12px; height: 12px; 在小屏下容易变形或重叠；用 aspect-ratio: 1 + border-radius: 50% 更稳：
• .dot { width: 12px; aspect-ratio: 1; border-radius: 50%; background: #999; }
• 激活态别用 opacity，它会让 hover 也变淡；改用 background-color: #333 或 box-shadow: 0 0 4px rgba(0,0,0,0.4)
• 移动端慎用 :hover，优先用 :active 或绑定 JS 的 click 事件
指示器与轮播页同步必须靠 radio + 兄弟选择器
纯 CSS 轮播中，无法用 JavaScript 外部修改后让 CSS 自动响应，所以推荐方案是：
• 每张图对应一个 input#slide-1 ~ input#slide-3
• 所有 input 设 position: absolute; opacity: 0; pointer-events: none
• 利用兄弟选择器：当 input#slide-3:checked ~ .carousel-track 时，同时控制 .dots .dot:nth-child(3) 高亮
• HTML 结构顺序必须是：所有 input → .carousel-track → .dots，否则兄弟选择器失效
• 若轮播用 JS 控制 transform，那指示器必须用 JS 同步 class，CSS 无能为力
响应式断点要作用于指示器容器本身
常见错误是把 @media 写在全局，导致小屏下圆点间距崩坏、甚至换行。
正确做法：
• 给指示器容器（如 .dots）单独设 @container 查询（需父容器启用了 container-type: inline-size）
• 或退而求其次，在 .dots 上写媒体查询：@media (max-width: 480px) { .dots { gap: 4px; } }
• 不要给每个 .dot 单独设 width 百分比，那会破坏 flex: 0 0 auto 的本意
• 如果轮播项数动态（比如 CMS 输出），JS 生成 radio 和 dot 时务必保持索引一一对应，否则同步错位
最易被忽略的点：兄弟选择器依赖 DOM 顺序，radio 必须在轮播轨道和指示器之前；gap 在旧浏览器里不兼容，若需支持 IE，得回退到 :not(:last-child) { margin-right: 8px; }；另外，所有圆点必须有明确的 width 和 height，否则 flex: 0 0 auto 会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
