纯 css 实现图片点击放大预览需用 radio hack 而非 checkbox，因 radio 组通过 name 强制互斥，配合 :checked 可精准控制单张大图显隐；html 中 radio 必须前置，css 用 ~ 选择器向后控制模态框显示与居中，并用 label 实现关闭。
纯 CSS 实现图片点击放大预览是可行的，但必须明确一点：checkbox hack 本身不支持“点击后显示大图并居中遮罩”，它只能做「单选/多选状态切换 + 后续样式联动」；真正能实现类 Lightbox 效果的，是 radio hack（配合 :checked + 邻居/子元素选择器）。
为什么不能用 checkbox 而要用 radio
checkbox 是多选，无法天然保证「同一时间只展开一张大图」；而 radio 组通过 name 属性强制互斥，配合 :checked 可精准控制某张大图显隐。一旦用了 checkbox，多个缩略图同时被勾选，样式会错乱或全部触发——这不是 bug，是机制使然。
- 缩略图需对应唯一
id，如thumb-1 - 大图容器用
label[for="thumb-1"]关联，点击即“选中”该radio - 大图本身放在
input#thumb-1后面，用input:checked ~ .modal-1控制显示
HTML 结构必须满足层级与顺序约束
CSS hack 的核心限制在于：选择器只能向后、向下匹配，不能反向查找。所以 HTML 中 input 必须出现在所有要控制的元素之前，且不能被其他块级元素隔断。
- 错误写法：
<div><input></div> <div class="modal"></div>→~选择器失效 - 正确写法：
<input id="img1" type="radio" name="gallery"><div class="modal modal-1"></div> - 每个缩略图都得有独立
id和配套for，不能复用 class 控制多张
如何让大图居中且可关闭
居中靠 position: fixed + top: 50% + transform: translate(-50%, -50%)；关闭则依赖另一个 label 指向同一个 radio 并设为 checked，再用 :checked ~ .modal 隐藏它——本质是“再点一次取消选中”。
- 关闭按钮必须是
<label for="img1"></label>，不是button或div -
.modal初始用opacity: 0; visibility: hidden;，:checked ~ .modal改为opacity: 1; visibility: visible; - 加
transition: opacity 0.2s让淡入更自然，避免突兀闪现
移动端点击区域小、z-index 易被覆盖
在 iOS Safari 或 Android Chrome 上，label 点击热区可能太小，导致点不中；同时模态框若没设足够高的 z-index，会被 sticky header 或 fixed navbar 盖住。
- 给缩略图加
min-height: 44px（iOS 最小触控尺寸），或包裹一层label扩展热区 -
.modal的z-index至少设为9999，别信“100 够用了” - 不要用
pointer-events: none在父容器上，它会吃掉所有label点击
真正难的不是写对那几行 CSS，而是理解 radio hack 是一种“状态驱动布局”，所有交互都映射到表单控件的选中状态；一旦 DOM 顺序或选择器方向出错，整个链路就断了——这种限制比 JS 的灵活性低得多，但换来的是零 JS、可缓存、无障碍基础支持好。如果项目需要键盘导航、ESC 关闭或图片预加载，还是得切回 JS 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
