立体几何纹理需三层协同：底模用圆锥渐变定结构，中模用精细线性渐变建网格，顶模用径向渐变控光影景深；透明度、顺序、方向与坐标系统必须统一。
靠多层渐变交错做出立体几何纹理，核心不是堆叠颜色，而是分层控制空间逻辑：每层承担不同视觉职能——底层定结构、中层建网格、顶层加光影与景深。关键在透明度、方向一致性、坐标系统匹配，而不是单纯叠加更多渐变。
分三层各司其职，缺一不可
真正有立体感的几何纹理，通常由三个语义明确的图层构成：
-
底模（结构层）：用圆锥渐变（
conic-gradient）或精细角度线性渐变模拟扭曲能量场，比如conic-gradient(from 0deg, #2a0e4e, transparent 25%, #1d093a)，营造中心发散的张力感； -
中模（度量层）：叠加间距精准的浅色线性渐变网格，如
linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px)重复铺满，再配合background-size: 32px 32px，形成带工程感的极细坐标骨架； -
顶模（空间层）：用大半径径向渐变压暗边缘，例如
radial-gradient(circle at center, transparent 70%, #030712 100%)，把视觉焦点锁在中央，强化“嵌入式屏幕”般的纵深错觉。
透明度和书写顺序决定是否透出立体感
所有上层渐变必须含 transparent 或低 alpha 值（如 rgba(255,255,255,0.04)），否则会盖死底层结构。且必须写在同一 background 声明里，用英文逗号分隔：
✅ 正确写法（后写的在上层，透明通道留出）：
background: radial-gradient(circle at center, transparent 70%, #030712 100%), linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px), conic-gradient(from 0deg, #2a0e4e, transparent 25%, #1d093a);
❌ 错误写法（分开声明、无透明、顺序颠倒）：
- 把
background-color: #111单独写，它不参与渐变混合； - 上层用纯白
#fff而非rgba(255,255,255,0.03)，直接抹掉下面所有细节； - 圆锥渐变写在最前面，被后面两层完全遮住，失去结构锚点。
方向与坐标系统要统一，避免视觉冲突
如果想模拟左上光源下的凸起网格，所有斜向高光层就得保持一致方向：
- 中层网格若用
linear-gradient(45deg, ...)做对角线纹理，顶模的微弱高光也得用linear-gradient(to bottom right, transparent, rgba(255,255,255,0.06))； - 避免混用
to top和to bottom right，人眼会感知为多个光源，削弱立体可信度； - 圆锥渐变的旋转起点（
from 0deg）和线性渐变角度最好同源校准，比如都以 UI 的“北向上”为基准，方便后期用 CSS 变量动态调整整体朝向。
微调细节比加层数更重要
加到第四层往往适得其反。更有效的优化集中在几个毫米级参数：
- 网格线宽严格控制在
1px，透明度 ≤ 4%，太浓会像旧显示器噪点； - 圆锥渐变中透明段占比建议设为
20%–30%，太少显得僵硬，太多则失重； - 径向暗角的起始透明区建议从
65%–75%开始，太靠内会缩窄可视区域，太靠外削弱聚焦感； - 所有
background-size和background-position必须显式声明，尤其网格层——默认auto会导致在不同宽高比容器中错位拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
