景深感依赖多层渐变的物理逻辑叠加：底层定色调体积，上层用透明色模拟反射路径；css中background内逗号分隔的渐变从前到后由上至下堆叠，高光层须前置，光源方向需一致（如左上光源用to bottom right），transparent优于低透明度rgba，border-radius需防裁剪干扰。
景深感不是靠“加阴影”或“调透明度”堆出来的，而是靠多层渐变的物理逻辑叠加：底层定色调与体积，上层用透明色模拟光在表面的反射路径。关键不在层数多，而在每层是否承担明确的视觉职能。
background 中多个 linear-gradient 的书写顺序和覆盖关系
CSS 多层背景里，background 属性中用英文逗号分隔的渐变，**先写的在上，后写的在下**——这和 Photoshop 图层顺序完全一致。如果你把高光层写在后面，它会被主色层盖住，根本看不到。
-
linear-gradient(to bottom right, transparent 0%, #fff 70%)必须放在前面（上层），否则无法形成斜向高光 -
linear-gradient(to right, #2575fc, #6a11cb)得放在后面（底层），作为体积和基调的承载面 - 漏掉
transparent或写成纯白#ffffff，上层就变成不透明遮罩，底层全被吃掉 - 所有渐变必须写在同一个
background声明里，不能拆成background-image+background-color
为什么 to bottom right 比 to right 更适合模拟左上光源
人眼识别立体感，依赖光影方向的一致性。如果光源来自左上方，高光区域必然从左上向右下延伸，对应渐变方向就是 to bottom right；写成 to right 会让人感觉光是从正左打来的，但阴影却没跟着偏移，观感失真。
-
to bottom right和to top left是一对反向逻辑，混用会导致“两股光打架” - 角度值如
315deg等价于to bottom right，更适合微调——比如改成305deg让高光更偏水平一点 - 用
radial-gradient(circle at 20% 20%, #fff, transparent)模拟点光源高光时，位置20% 20%也得匹配左上光源逻辑
transparent 与 rgba(255,255,255,0.1) 在上层渐变中的实际差异
transparent 是完全透明的关键词，而 rgba(255,255,255,0.1) 是带 10% 不透明度的白色。前者让底层 100% 显露，后者会轻微提亮整个底层，容易让暗部发灰。
- 做高光层时，优先用
transparent开头，比如linear-gradient(45deg, transparent 0%, #fff 20%, transparent 100%) - 如果需要柔化过渡，可把中间色设为
rgba(255,255,255,0.15)，但别超过 0.2，否则削弱景深对比 - 避免在上层用
rgba(0,0,0,0.1)模拟阴影——那会脏底色，真正阴影应由底层渐变的暗端自然带出
最容易被忽略的是裁剪干扰：border-radius 会裁掉上层渐变的边缘，导致高光断裂。如果容器有圆角，建议把渐变层套在伪元素里单独控制尺寸，或者用 background-clip: padding-box 避免圆角吃掉高光区域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
