filter: blur(0) 会强制创建独立合成图层，导致边缘脱离主文档流抗锯齿上下文而发虚；transform: scale(1.22) 通过扩大内容使模糊溢出被 overflow: hidden 自然覆盖，但需配合使用且响应式下易失效，更优解是用 mask 精确控制可见区域。
filter: blur(0) 和 transform: scale(1) 都不能直接“解决”边缘模糊——它们是触发模糊或掩盖模糊的起点，真正的问题出在渲染层分离和像素采样边界上。
为什么加了 blur(0) 元素边缘反而更糊
给元素设 filter: blur(0) 本身不模糊，但会强制浏览器创建独立合成图层（尤其搭配 will-change: filter 或动画时）。一旦图层分离，元素边缘就脱离主文档流抗锯齿上下文，GPU 合成阶段用灰度抗锯齿重绘，导致文字/边框发虚、毛边。这不是 bug，是硬件加速的副作用。
- 常见于
header::before背景模糊 + 文字叠加的场景：背景伪元素带blur(4px)，父容器没隔离，文字被拖进同一模糊图层 - Safari 和旧版 Chrome 更明显，macOS 下亚像素渲染直接降级
- 不要全局写
* { filter: blur(0); }—— 这等于批量开启图层分裂
transform: scale(1.22) 是怎么“修复”边缘裁剪的
原始问题不是“模糊”，而是 filter: blur() 的扩散像素被父容器 overflow: hidden 硬裁掉，造成边缘黑边或断层。缩放本质是扩大内容区域，让模糊溢出部分落在裁剪框内。
-
scale(1.22)是经验值：需略大于1 + blur-radius / element-width，太小仍裁边，太大引发重绘开销 - 必须配合
overflow: hidden才生效；单独加scale不解决模糊，只解决裁剪 - 响应式下失效风险高——
width变，缩放比例就得重算，建议改用mask替代
真正可控的边缘处理方案：用 mask 替代裁剪
比起硬缩放+隐藏，mask 直接定义可见区域，不触发图层分裂，也不依赖像素溢出补偿。
- 左右边缘渐隐：
mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent) - 四边柔化（如卡片）：
mask: radial-gradient(farthest-side, transparent, black)，再配backdrop-filter: blur(4px) - 兼容性注意：Firefox 需
-webkit-mask前缀，但现代 Safari/Chrome 已原生支持mask - 别用
mask-image: url(...)引图片遮罩——性能差且难响应式，纯 CSS 渐变足够
最易被忽略的一点：模糊边缘是否需要交互？如果要点击或 hover，mask 区域默认不可点，得额外加 pointer-events: auto 到非透明段——这点连很多设计稿都漏标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
