transition 对 left 无效是因为 left 仅在定位元素（position: relative/absolute/fixed）上生效；非定位元素修改 left 不触发渲染位移，故无法过渡。
transition 为什么对 left 无效？
因为 left 只在定位元素（position: relative/absolute/fixed）上生效，如果元素没设定位，改 left 不会触发渲染位移，自然也过渡不了。常见错误是直接给普通 <div> 或 <code><span></span> 加 transition: left 0.3s，结果点半天圆点纹丝不动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保开关容器有
position: relative - 圆点元素必须设
position: absolute，且初始left值明确（比如left: 4px） - 不要用
margin-left代替left——虽然也能动，但语义错、易和父容器 padding 冲突
如何用 checkbox + label 实现无 JS 切换
纯 CSS 开关最稳的方案是靠原生 <input type="checkbox"> 的状态切换驱动样式变化，避免 JS 绑定、事件监听或状态同步问题。关键在利用 :checked 伪类联动兄弟元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<input>必须和圆点元素同级或可被~/+选中（推荐放最前，用input:checked ~ .thumb） - 圆点元素（
.thumb）加transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1)—— 这个贝塞尔曲线比默认ease更顺滑，接近 iOS 开关感 - 不要隐藏
<input>用display: none，会导致键盘无法 focus；改用position: absolute; opacity: 0; pointer-events: none;
left 值怎么算才对齐？
圆点从“关”到“开”，left 不是简单写死两个值，得根据容器宽度、圆点尺寸、内边距动态算。写错就导致位移偏移、卡边、甚至出界。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 假设容器宽
60px、高32px，圆点半径12px（即宽高24px），内边距4px - “关”态：
left: 4px（贴左内边距） - “开”态：
left: calc(60px - 24px - 4px) = 32px（贴右内边距） - 更健壮写法：
left: calc(100% - 24px - 4px)，适配不同容器宽度
移动端点击区域太小怎么办？
纯 .thumb 元素通常只有 24px，手指点不准，尤其 iOS Safari 默认会放大，还可能误触。不能只靠加大圆点本身——会破坏设计比例。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
label设为块级，宽高覆盖整个开关容器（width: 100%; height: 100%），并设display: block - 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent消除点击灰斑 - 确保
label的for属性正确绑定input的id，否则点不生效
真正难的不是让圆点动起来，而是让每次点击都精准触发、位移不跳变、缩放不失控——这些细节堆起来，才是用户觉得“丝滑”的原因。
