Firefox 对 filter: blur() 的最大值限制为 100px，导致高斯模糊在 Chrome 中可设为 250px 而在 Firefox 中被截断，造成视觉不一致；本文提供无需依赖 filter: blur 的纯 CSS 替代方案，利用 radial-gradient 背景叠加实现平滑、响应式、全浏览器兼容的“由实到虚”的圆形模糊消散效果。
firefox 对 `filter: blur()` 的最大值限制为 100px，导致高斯模糊在 chrome 中可设为 250px 而在 firefox 中被截断，造成视觉不一致；本文提供无需依赖 `filter: blur` 的纯 css 替代方案，利用 `radial-gradient` 背景叠加实现平滑、响应式、全浏览器兼容的“由实到虚”的圆形模糊消散效果。
现代浏览器对 filter: blur() 的实现存在差异：Chrome 支持高达数百像素的模糊半径，而 Firefox（截至 v128）强制将 blur() 限制在 100px 以内，超出部分会被裁剪或失效。这使得依赖 filter: blur(250px) 实现大范围径向消散效果（如背景光晕、焦点柔化）时，在 Firefox 中明显失真——边缘生硬、渐变断裂，与 Chrome 的柔和过渡形成鲜明对比。
直接使用 <img> 或 <svg> 配合 filter: blur 同样受限，且引入额外资源加载、缩放失真和维护成本。更优解是放弃 filter: blur，转而用纯 CSS 的多层径向渐变（radial-gradient）模拟视觉模糊感——这不是像素级模糊，而是通过颜色透明度与扩散范围的精确控制，达成人眼感知上高度近似的“渐隐”效果，且 100% 原生、无 JS、零兼容性风险。
✅ 推荐方案：利用 body 或容器的 background 属性，叠加多个同心、不同半径与透明度衰减的 radial-gradient：
body {
margin: 0;
height: 100vh;
/* 单层核心渐变：从实色平滑过渡到完全透明 */
background: radial-gradient(
circle at center,
rgba(29, 144, 250, 0.3) 0%,
rgba(29, 144, 250, 0) 70%
);
/* 可选：叠加第二层更宽泛的浅色渐变增强层次感 */
background-image:
radial-gradient(circle at center, rgba(29, 144, 250, 0.15) 0%, transparent 85%),
radial-gradient(circle at center, rgba(29, 144, 250, 0.3) 0%, transparent 70%);
}? 关键要点：
- circle at center 确保圆形对称，避免椭圆失真；
- 百分比终点（如 70%）控制“消散起始点”，数值越大，模糊区域越宽广；
- 多层渐变叠加可模拟更自然的光学衰减（内层饱和度高，外层更弥散）；
- 所有值均为相对单位（%），天然响应式，适配任意视口尺寸；
- 完全规避 filter 兼容性陷阱，Safari / Firefox / Chrome / Edge 全支持。
⚠️ 注意事项：
- 此法本质是视觉模拟，非真实高斯模糊，但对背景光晕、氛围渲染等场景效果极佳；
- 若需在元素内部（非全屏）实现，可将 radial-gradient 应用于伪元素 ::before 并绝对定位，配合 z-index 分层；
- 避免过度叠加渐变层数（一般 ≤3 层），以免增加渲染开销；
- 如需动态控制（如悬停增强），可结合 CSS 自定义属性（--blur-strength）与 calc() 动态计算终止位置。
总结：当 filter: blur() 遇到浏览器壁垒，回归 CSS 渐变的本质能力反而是更稳健、更高效的选择——用数学定义的色彩过渡，替代不可控的滤镜渲染，让设计在每台设备上都精准如一。
