纯 CSS 无法实现真正的 Mesh 渐变，但可通过多个 radial-gradient() 叠加、精准定位、rgba 透明度控制及伪元素分层模拟苹果 UI 中的柔和多点径向渐变效果。
纯 CSS 无法直接实现真正的 Mesh 渐变（即基于物理光照模型的多点、非线性、可变形的渐变网格），但苹果 UI 中常见的“柔和多点径向渐变”效果——比如 macOS 窗口标题栏、iOS 控件浮层、Siri 气泡背景——本质是多个 radial-gradient() 叠加 + 透明度控制 + 精确位置缩放，配合 background-blend-mode 或分层伪元素模拟出近似视觉感。
用逗号分隔多个 radial-gradient() 直接写进 background
这是最轻量、无需额外 DOM 的方式，适用于单个元素背景。关键不是“多重”，而是“多源叠加”：
-
radial-gradient()支持无限多个，用逗号分隔，浏览器按从前往后顺序绘制（前层覆盖后层） - 每个渐变必须显式定义尺寸和位置，否则默认 center 会重叠，失去“多点”感
- 推荐统一用
circle形状 +at x y定位 +transparent收尾，避免颜色硬边干扰 - 不要依赖
opacity整体降透明度——它会削弱所有图层，应改用rgba(r,g,b,a)或hsla()单独控制每层不透明度
示例（模拟 iOS 控件上方柔光点）：
.apple-glow {
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08), transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 60%),
#f5f5f7;
}注意：最后一项是纯色底色，确保无渐变区域有统一基底；三个光斑位置错开、半径不同、透明度递减，才能模拟真实散射感。
立即学习“前端免费学习笔记（深入）”；
用 ::before 和 ::after 分层控制混合模式
当需要更精细的混合（如叠加后产生柔光、叠加或滤色效果），background-blend-mode 在多渐变中支持有限，且对 transparent 行为不一致。此时用伪元素分层更可控：
-
::before放主光斑（高亮、小范围、较高 alpha），::after放辅光斑（偏暖/冷、大范围、低 alpha） - 两层都设
position: absolute+inset: 0+z-index，避免定位偏差 - 慎用
background-blend-mode: soft-light或overlay—— 它在 Safari 中渲染更接近苹果原生，但在 Chrome/Firefox 下可能过曝或发灰 - 若需兼容老版本 Safari（soft-light，改用透明度微调 + 高斯模糊（
filter: blur(2px)）软化边缘
示例结构：
.mesh-layer {
position: relative;
background-color: #f9f9fb;
}
.mesh-layer::before,
.mesh-layer::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px; /* 匹配容器圆角，避免光斑溢出 */
}
.mesh-layer::before {
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.2), transparent 50%);
}
.mesh-layer::after {
background: radial-gradient(circle at 70% 75%, rgba(240,245,255,0.12), transparent 70%);
filter: blur(4px);
}为什么不用 background-blend-mode 直接叠加？
看似简洁，但实际踩坑多：
- 多个
radial-gradient()同时参与background-blend-mode时，Safari 和 Chrome 解析逻辑不一致，尤其涉及transparent时，Safari 会忽略 blend，Chrome 可能错误合成 -
soft-light在深色背景下容易失真（变灰白），而苹果风格依赖精准的明度梯度，不是简单“提亮” - 无法单独 blur 某一层——
filter作用于整个 background 层，模糊会吃掉所有渐变细节 - 调试困难：你无法 inspect 每个渐变的独立表现，只能看到最终合成结果
所以除非项目明确只跑最新 Safari，否则优先用伪元素分层 + filter: blur() + rgba() 控制，视觉可控性远高于 blend mode。
尺寸关键词和位置精度决定“苹果感”成败
苹果 UI 渐变的柔和感，核心不在颜色，而在几何控制：
- 避免用
closest-side或farthest-corner—— 它们响应式行为不稳定，宽高比变化时光斑会突兀拉伸或收缩 - 一律用百分比定位（如
at 25% 30%）+ 固定像素半径（如20px）或视口单位（4vw），保证跨设备比例一致 - 光斑中心尽量避开元素正中心——真实光源极少居中，偏移 10–25% 更自然
- 三层光斑建议：主光（亮白，小，偏上）、辅光（微蓝/微黄，中，偏右下）、环境光（极淡灰白，大，居中偏下）
真正难的不是写出来，而是调——同一组参数在 iPhone SE 和 iPad Pro 上视觉权重完全不同。建议用 prefers-reduced-motion: reduce 做降级 fallback，比如关掉 blur 或合并光斑为单层。
