Safari 中 filter: blur() 白边是规范规定的渲染行为，因采样溢出透明区域被填白；最直接解法是给模糊元素的直接父容器设 overflow: hidden，或用 transform: scale() 配合负 margin 补偿。
blur() 白边是 Safari 渲染越界，不是样式写错了
filter: blur() 在 Safari（尤其是 iOS）中边缘出现白边，根本原因不是 CSS 写错或图片问题，而是规范行为：blur() 会在绘制阶段向外扩展约两倍 blur() 值的像素区域采样。这部分溢出像素落在透明画布上，Safari 默认用白色填充——所以你看到的是“白边”，不是 bug，是 CSS Filter Effects Level 1 明确规定的渲染逻辑。
给父容器加 overflow: hidden 是最直接解法
对模糊元素自身设 overflow: hidden 完全无效，因为 blur 溢出的是渲染层（paint layer），不归盒模型管。必须作用于它的**直接父容器**：
- 父容器需是块级、有明确尺寸（比如
position: relative或固定宽高） - 若父容器本身需要滚动（
overflow: auto），此方案会失效 - 若父容器内有
position: absolute子元素（如 tooltip、下拉菜单），可能被意外裁掉 - Safari 偶发重绘异常时，可加
transform: translateZ(0)触发硬件加速缓解
transform: scale() + 负 margin 更适合复杂布局
当 overflow: hidden 不可用时，这是更稳妥的替代方案：用缩放撑大内容区域，让 blur 溢出部分自然落在父容器可视范围内，再用负边距拉回视觉原位。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
scale(1.05)是常见起点；blur(4px)推荐scale(1.03)–scale(1.05)，blur(12px)建议scale(1.08)–scale(1.1) -
margin取值靠经验：blur(6px)配margin: -3px，blur(12px)配margin: -6px -
scale和margin必须同时加在同一元素上；只加一个，白边或偏移仍存在 - 该方案对
position: absolute子元素友好，不会像overflow: hidden那样意外裁掉它们
背景图场景优先试 background-size: 150% 150%
如果白边出现在带背景图的容器（如毛玻璃登录页），大概率是 blur 采样越界取到了空白区域。此时扩展背景铺满范围比调 layout 更有效：
立即学习“前端免费学习笔记（深入）”；
- 把
background-size: cover改成background-size: 150% 150%，让背景多铺一圈 - blur 值较大（如 >10px）时，可额外给
body或html设置相同背景图，确保模糊区域外也有像素可采样 - 避免和
border-radius同时使用——圆角会提前裁剪背景，blur 采样范围进一步受限，白边加倍 - 纯色背景时此法无效，别硬套
blur 值与 scale/margin 的匹配关系。它不是数学公式能算出来的——设备像素比、字体抗锯齿策略、GPU 驱动版本都会影响最终呈现。建议用 CSS 变量 + DevTools 实时拖动调试。 
