# 渐进模糊技能 ## 工作流程 1. 确认相对于 UI 的位置（顶部或底部）、高度和 z 索引。 2. 提供匹配的代码片段和简短的使用清单。 3. 仅提供有针对性的调整（高度、模糊步骤、方向、不透明度停止）。 ## 使用清单 * 将 HTML 插入到 `` 中。 * 将 `.gradient-blur` 元素保持在 DOM 顶部附近。 * 确保其背后的背景存在（背景滤镜模糊了后面的内容）。 * 调整“z-index”以位于内容上方但模态下方。 ## 顶部模糊（从顶部开始）

<风格> .梯度模糊{ 位置：固定； z 索引：5；插入：0 0 自动 0；高度：12%；指针事件：无； } .gradient-blur > div, .gradient-blur::之前， .gradient-blur::after { 位置：绝对；插图：0； } .gradient-blur::之前{ 内容：“”； z 索引：1；背景过滤器：模糊（0.5px）； mask：线性渐变（到顶部， rgba(0, 0, 0, 0) 0%, RGBA(0, 0, 0, 1) 12.5%, RGBA(0, 0, 0, 1) 25%, rgba(0,0,0,0)37.5%); } .gradient-blur > div:nth-of-type(1) { z 索引：2；背景过滤器：模糊（1px）； mask：线性渐变（到顶部， RGBA(0, 0, 0, 0) 12.5%, RGBA(0, 0, 0, 1) 25%, RGBA(0, 0, 0, 1) 37.5%, rgba(0,0,0,0)50%); } .gradient-blur > div:nth-of-type(2) { z 索引：3；背景过滤器：模糊（2px）； mask：线性渐变（到顶部， RGBA(0, 0, 0, 0) 25%, RGBA(0, 0, 0, 1) 37.5%, RGBA(0, 0, 0, 1) 50%, rgba(0,0,0,0)62.5%); } .gradient-blur > div:nth-of-type(3) { z 索引：4；背景过滤器：模糊（4px）； mask：线性渐变（到顶部， RGBA(0, 0, 0, 0) 37.5%, RGBA(0, 0, 0, 1) 50%, RGBA(0, 0, 0, 1) 62.5%, rgba(0,0,0,0)75%); } .gradient-blur > div:nth-of-type(4) { z 索引：5；背景过滤器：模糊（8px）； mask：线性渐变（到顶部， RGBA(0, 0, 0, 0) 50%, RGBA(0, 0, 0, 1) 62.5%, RGBA(0, 0, 0, 1) 75%, rgba(0,0,0,0)87.5%); } .gradient-blur > div:nth-of-type(5) { z 索引：6；背景过滤器：模糊（16px）； mask：线性渐变（到顶部， RGBA(0, 0, 0, 0) 62.5%, RGBA(0, 0, 0, 1) 75%, RGBA(0, 0, 0, 1) 87.5%, rgba(0,0,0,0)100%); } .gradient-blur > div:nth-of-type(6) { z 索引：7；背景过滤器：模糊（32px）； mask：线性渐变（到顶部， RGBA(0, 0, 0, 0) 75%, RGBA(0, 0, 0, 1) 87.5%, rgba(0,0,0,1)100%); } .gradient-blur::after { 内容：“”； z 索引：8；背景过滤器：模糊（64px）； mask：线性渐变（到顶部， RGBA(0, 0, 0, 0) 87.5%, rgba(0,0,0,1)100%); } ## 底部模糊（从底部开始）

<风格> .梯度模糊{ 位置：固定； z 索引：5；插入：自动 0 0 0；身高：65%；指针事件：无； } .gradient-blur > div, .gradient-blur::之前， .gradient-blur::after { 位置：绝对；插图：0； } .gradient-blur::之前{ 内容：“”； z 索引：1；背景过滤器：模糊（0.5px）； mask：线性渐变（到底部， rgba(0, 0, 0, 0) 0%, RGBA(0, 0, 0, 1) 12.5%, RGBA(0, 0, 0, 1) 25%, rgba(0,0,0,0)37.5%); } .gradient-blur > div:nth-of-type(1) { z 索引：2；背景过滤器：模糊（1px）； mask：线性渐变（到底部， RGBA(0, 0, 0, 0) 12.5%, RGBA(0, 0, 0, 1) 25%, RGBA(0, 0, 0, 1) 37.5%, rgba(0,0,0,0)50%); } .gradient-blur > div:nth-of-type(2) { z 索引：3；背景过滤器：模糊（2px）； mask：线性渐变（到底部， RGBA(0, 0, 0, 0) 25%, RGBA(0, 0, 0, 1) 37.5%, RGBA(0, 0, 0, 1) 50%, rgba(0,0,0,0)62.5%); } .gradient-blur > div:nth-of-type(3) { z 索引：4；背景过滤器：模糊（4px）； mask：线性渐变（到底部， RGBA(0, 0, 0, 0) 37.5%, RGBA(0, 0, 0, 1) 50%, RGBA(0, 0, 0, 1) 62.5%, rgba(0,0,0,0)75%); } .gradient-blur > div:nth-of-type(4) { z 索引：5；背景过滤器：模糊（8px）； mask：线性渐变（到底部， RGBA(0, 0, 0, 0) 50%, RGBA(0, 0, 0, 1) 62.5%, RGBA(0, 0, 0, 1) 75%, rgba(0,0,0,0)87.5%); } .gradient-blur > div:nth-of-type(5) { z 索引：6；背景过滤器：模糊（16px）； mask：线性渐变（到底部， RGBA(0, 0, 0, 0) 62.5%, RGBA(0, 0, 0, 1) 75%, RGBA(0, 0, 0, 1) 87.5%, rgba(0,0,0,0)100%); } .gradient-blur > div:nth-of-type(6) { z 索引：7；背景过滤器：模糊（32px）； mask：线性渐变（到底部， RGBA(0, 0, 0, 0) 75%, RGBA(0, 0, 0, 1) 87.5%, rgba(0,0,0,1)100%); } .gradient-blur::after { 内容：“”； z 索引：8；背景过滤器：模糊（64px）； mask：线性渐变（到底部， RGBA(0, 0, 0, 0) 87.5%, rgba(0,0,0,1)100%); } ## 自定义旋钮 * 方向：翻转`到顶部`↔`到底部`。 * 高度：调整`.gradient-blur`高度百分比。 * 强度：更改模糊值（0.5px → 64px）。 * 步骤：添加/删除图层以控制平滑度。 ## 常见陷阱 * `backdrop-filter` 需要其后面有内容；它不会模糊平坦的背景。 * 高模糊值需要大量 GPU 处理；减少低端设备上的步骤。 * 确保“pointer-events: none”保留以避免阻止点击。 ## 规格缺失时要问的问题 * 模糊应该从顶部开始还是从底部开始？ * 模糊区域应该多高？ * 低端设备的性能是一个问题吗？

渐进式模糊

包含技能