局部模糊需用CSS clip-path切出区域并配合backdrop-filter: blur()作用于透明元素背后的背景图；父容器设背景图，子元素设transparent背景、absolute定位及clip-path；注意兼容性与降级方案。
背景图片局部模糊需要 CSS clip-path + backdrop-filter
纯 HTML 无法实现局部模糊，必须配合 CSS。核心是用 clip-path 切出需要模糊的区域，再对这个区域应用 backdrop-filter: blur()。注意：这本质上是对「背后内容」做模糊，所以该元素必须有透明背景、且背后真有可被模糊的内容（比如父容器设置了背景图）。
常见错误是直接给 <div> 自身设 background-image 再加 backdrop-filter——没用，因为背后没有东西可模糊。正确做法是让模糊层「浮在」带背景图的容器之上。
- 父容器（如
<body>或<section>）设置background-image - 子元素（如遮罩层）设
position: absolute、background: transparent、backdrop-filter: blur(8px) - 用
clip-path限定模糊生效范围，例如clip-path: circle(100px at 50% 50%) - 确保子元素不遮挡文字或交互内容时，可加
pointer-events: none
backdrop-filter 兼容性必须检查
Firefox 默认禁用 backdrop-filter，需手动开启；Safari 15.4+ 支持，但旧版 iOS Safari 完全不支持；Chrome 112+ 稳定支持。生产环境务必加降级方案。
检查方式：打开浏览器开发者工具 → 输入 backdrop-filter 查看是否被划掉；或运行 if ('backdropFilter' in document.documentElement.style) {...} 判断。
立即学习“前端免费学习笔记（深入）”；
- 不支持时，可用半透明色块（
background: rgba(255,255,255,0.6)）模拟「弱化视觉干扰」效果 - 避免依赖
backdrop-filter做关键布局，它不影响盒模型尺寸 - 开启硬件加速可缓解部分卡顿：
transform: translateZ(0)或will-change: filter
圆形/椭圆模糊区域的 clip-path 写法
要实现「头像位置模糊」或「焦点区域高斯模糊」，优先用 circle() 或 ellipse() 函数，参数顺序容易写反。
clip-path: circle(50px at 200px 150px) 表示：以 (200px, 150px) 为圆心，半径 50px 的圆形裁剪区域；at 后面是坐标，不是宽高。
- 坐标支持百分比：
circle(15% at 30% 40%)，适合响应式布局 - 椭圆写法：
ellipse(80px 40px at center)，先横轴半径、再纵轴半径 - 避免用复杂 SVG path，移动端渲染性能差，且难以动态调整
- 调试时临时加
outline: 1px solid red查看裁剪边界
模糊区域跟随鼠标移动的简单实现
用 JS 动态更新 clip-path 中的坐标即可，但要注意防抖和性能。
监听 mousemove，读取 event.clientX / event.clientY，拼接成新的 clip-path 值并赋给元素 style。别用 innerHTML 或频繁重排。
- 使用
requestAnimationFrame节流，避免每帧都计算：let ticking = false; function update() { if (!ticking) { requestAnimationFrame(() => { /* 更新 clip-path */; ticking = false; }); ticking = true; } - 坐标需转为相对于父容器的值（减去
getBoundingClientRect().left/top） - 移动端要同时监听
touchmove，且touches[0]取坐标 - 模糊半径不宜过大（>20px），否则边缘发虚严重，且耗 GPU
实际效果取决于背景图清晰度、模糊半径与裁剪精度的平衡。最易被忽略的是：模糊层必须有明确的堆叠上下文（z-index 或 position），否则可能被其他元素盖住，或者根本没机会模糊到背后的图。
