细节与特效 · 耐看的小细节
渐进模糊Progressive blur
- 越靠边越糊
- 软边
- 不硬切
模糊的强度不是均匀的，而是从一边的完全清晰一路递增到另一边的完全糊掉，中间靠好几层叠加挤出来。用在一排标签的两端、或者滚动区域的上下边缘 —— 内容不是被硬切掉，而是「退到焦外」。
什么时候用它
用在横向溢出的一排标签、卡片列表的两端，或者固定顶栏和内容之间做过渡。它必须配 mask 一起用 —— 没有渐隐遮罩的话，模糊层的边界会是一条看得见的直线，比不模糊还难看。
参数
5 stacked backdrop-filter layers · blur 0→8px stepped · mask-image: linear-gradient · static, no animation
配方
渐进模糊 → 5 stacked backdrop-filter layers · blur 0→8px stepped · mask-image: linear-gradient · static, no animation
给 AI 的一句话
做一个渐进模糊：叠 5 层 backdrop-filter，每层的 blur 依次是 1、2、4、6、8px，每层再用 mask-image: linear-gradient 把自己的可见区间限制在对应的一段（互相重叠一点），合起来就是一条从清晰到糊掉的连续斜坡。整段是静态的，不要让它动。层数少于 4 会看到明显的台阶。