本文介绍如何绕过 Chrome 与 Firefox 对 filter: blur() 的渲染差异（如 Firefox 限制最大模糊半径为 100px），使用纯 CSS 径向渐变背景替代高斯模糊，实现平滑、响应式、全浏览器一致的“由中心向外淡出消失”的圆形模糊视觉效果。
本文介绍如何绕过 chrome 与 firefox 对 `filter: blur()` 的渲染差异（如 firefox 限制最大模糊半径为 100px），使用纯 css 径向渐变背景替代高斯模糊，实现平滑、响应式、全浏览器一致的“由中心向外淡出消失”的圆形模糊视觉效果。
在实际开发中，直接依赖 filter: blur() 实现大范围径向模糊常遭遇严重的跨浏览器兼容性问题：Chrome 支持高达数百像素的模糊值，而 Firefox 会强制截断 blur() 值（通常上限为 100px），导致视觉效果严重失真——正如你提供的对比图所示：Chrome 渲染出柔和扩散的渐隐圆斑，Firefox 则呈现生硬、收缩的边界。
根本原因在于，filter: blur() 是基于 SVG 滤镜的高斯模糊算法，其计算复杂度随半径平方增长，Firefox 出于性能与内存安全考虑主动设限；而 radial-gradient 作为 CSS 渐变函数，由渲染引擎直接光栅化，无硬性模糊半径限制，且天然支持透明度过渡与响应式缩放。
✅ 推荐方案：用多层叠加的 radial-gradient 模拟“视觉模糊感”
虽然单层径向渐变无法复现高斯模糊的物理光学特性，但通过合理设置色标位置与透明度衰减曲线，可高度逼近所需效果。关键技巧在于：
- 使用 circle at center 明确中心定位；
- 将完全透明点（rgba(..., 0)）设置在略大于容器半径的位置（如 60%～80%），避免边缘突变；
- 背景颜色与渐变色保持一致（如深色背景 + 半透明蓝渐变），增强融合感；
- 利用 或伪元素承载渐变，规避元素尺寸与 border-radius 的耦合限制。
以下是生产就绪的兼容写法：
/* 全局重置，确保渐变铺满视口 */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
/* 核心：单层 radial-gradient 实现平滑淡出 */
background:
radial-gradient(
circle at center,
rgba(29, 144, 250, 0.3) 0%,
rgba(29, 144, 250, 0) 70%
);
}
⚠️ 注意事项：
- 不要嵌套多个相同渐变（如原代码中重复三次 radial-gradient），这不会增强模糊感，反而增加渲染开销且易引发层叠干扰；
- 避免固定宽高 + border-radius 模拟圆斑：.right__circle 类中 500px 尺寸在响应式场景下极易溢出或失比例，且 filter: blur(250px) 在 Firefox 中被截断后仅剩 blur(100px)，效果崩溃；
- 若需局部应用（非全屏），推荐用伪元素 ::before 定位，并配合 transform: scale() 动态控制扩散范围，比硬编码 blur() 更可控；
- 性能更优：渐变背景无需 GPU 加速滤镜，内存占用低，滚动/动画时帧率稳定。
总结：当 filter: blur() 遇到浏览器限制，回归 CSS 基础能力——radial-gradient——反而是更健壮、更轻量、更兼容的解法。它不模拟模糊，而是用数学定义的平滑透明过渡，直接达成设计目标：一个从实色中心自然消散于背景的柔焦光斑。
