GRADUAL BLUR · 页底渐进高斯模糊

内容不是被裁掉的，是化进白雾里的

往下滚，注意 iframe 底边：文字和条纹经过时先轻微发虚、再彻底化开，不是一条生硬的白色渐变盖上去。滚到卡片处还有一个 target='parent' 的局部版本。

target='parent' 变体

官网 hero 区背景画的底边就是这个用法：容器 position:relative，模糊带 absolute 贴在容器内底边，只把这张"画"的下沿糊进纸面。

10层 backdrop-filter 叠出梯度

2ⁿ模糊量指数增长

4段 mask 划定每层的责任区

这条模糊带最反直觉的地方：一个 backdrop-filter: blur() 只能给整块区域一个统一的模糊值，做不出"越靠底越糊"。官网的解法（来自 React Bits 的 Gradual Blur，MIT，原作者 ansh-dhanani）是把带子切成 10 层完全重叠的 div，每层各自持有一档递增的模糊值，再用四段式 mask 让每层只在自己负责的横条里显影 —— 肉眼看到的连续梯度其实是 10 档阶梯，档距小到看不出台阶。

01层与层之间 mask 有一格重叠，接缝互相咬合

02pointer-events:none，带子不挡任何点击

03SSR 直出内联样式 div，浏览器端零 JS

官网首页用的参数：position bottom、height 4rem、strength 3、divCount 10、curve linear、exponential。挂法有两种：target='page' 时 position:fixed 钉在视口底边（本页这条），target='parent' 时 absolute 贴在最近的定位祖先内（上面卡片那条）。除此以外两种模式生成的层完全一样。

滚到这里时回头看底边 —— 任何内容（黑字、荧光绿块、细条纹）从带子里穿出来的过程都是渐进的。这也是它和"白色渐变遮罩"的本质区别：渐变遮罩是把内容盖白，Gradual Blur 是把内容失焦，颜色还在、形状还在，只是化开了。