点击局部放大必须用JS控制遮罩层显隐、位置及背景偏移，CSS仅负责定位、裁剪与渲染；关键在精确计算坐标、background-position和scale映射，避免因border/padding导致偏移。
点击触发局部放大，不能只靠 :hover
纯 CSS 的 :hover 无法响应点击事件，更无法在点击后持续保持放大状态。所谓“点击局部放大”，本质是用 JS 控制一个遮罩层（.magnifier）的显隐 + 位置 + 背景偏移，而 CSS 只负责定位、裁剪和视觉渲染。
关键点在于：点击后需记录鼠标坐标，并让放大镜窗口“锚定”到该位置，同时把大图对应区域拉进来显示——这一步必须由 JS 完成，CSS 只提供 position: absolute 和 clip-path 的能力。
- 容器必须设
position: relative，否则.magnifier会相对于 body 定位，导致错位 - 放大镜元素要用
pointer-events: none（初始）+pointer-events: auto（激活后），避免遮挡原图的后续点击 - 不要给图片本身加
transform: scale()，否则background-position计算会失准；缩放应通过background-size控制
clip-path 裁剪放大镜形状，但要注意兼容性
clip-path: circle(50px at 50% 50%) 可以快速做出圆形放大镜，比 border-radius: 50% 更精准——后者只是圆角，实际 DOM 区域仍是矩形，可能误触边缘。
但注意：clip-path 在旧版 Safari（≤15.6）和部分 Android WebView 中不支持数值型 at 偏移，必须降级为 circle(50px) 并配合 left/top 手动居中。
立即学习“前端免费学习笔记（深入）”；
- 移动端建议 fallback 到
border-radius: 50%+overflow: hidden组合 - 若需星形/多边形放大镜，用
clip-path: polygon(...)，但坐标必须基于放大镜容器尺寸归一化（如0.25 0.25表示 25% 位置） -
clip-path会影响浏览器图层合成，频繁动画时可加will-change: clip-path提示优化
定位计算必须扣掉 border/padding，否则坐标漂移
最常踩的坑：鼠标点击坐标直接赋给 left/top，结果放大镜总偏右下。这是因为 getBoundingClientRect() 返回的是视口坐标，而容器若有 border: 2px solid 或 padding: 10px，没减就会多出那几像素。
正确做法是用 JS 获取精确偏移：
const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left - parseInt(getComputedStyle(container).borderLeftWidth) - parseInt(getComputedStyle(container).paddingLeft); const y = e.clientY - rect.top - parseInt(getComputedStyle(container).borderTopWidth) - parseInt(getComputedStyle(container).paddingTop);
- 千万别用
e.offsetX/e.offsetY，它们在缩放或 transform 后不可靠 - 如果容器用了
box-sizing: border-box，padding已计入宽高，但border仍要单独减 - 放大镜自身尺寸（如
width: 120px）也要参与居中计算：left = x - 60，否则镜片中心不对准点击点
background-position 单位混乱？一律用 px 显式声明
当大图作为 background-image 拉进放大镜容器时，background-position 若写成百分比或 center，会因容器缩放、background-size 设置不同而失效。必须用 px 值动态控制。
公式是：background-position-x = -(x * scale)，其中 scale = largeImageWidth / smallImageWidth。例如小图 300×200，大图 1200×800，则 scale = 4，点击 x=80 处，背景就要左移 -320px。
- 大图分辨率至少是小图的 2 倍，否则放大后糊；推荐 3–4 倍
-
background-size必须设为固定值（如1200px 800px），禁用100% 100%或cover（后者会裁剪，破坏坐标映射） - 若图片是 SVG 或文字图标，加
image-rendering: pixelated防止模糊
真正难的不是写对一行 clip-path，而是坐标系对齐——从视口到容器，从容器到背景图，每层 offset 都得手动扣干净。JS 算错 1px，放大镜就悬在空中。
