关键在于光源方向一致性和色标位置精准控制：统一使用315deg等角度值确保多层渐变方向逻辑统一，高光用窄色标（如0%-15%-30%），暗部用带色相深灰叠加微弱同向渐变，伪元素分层实现主调与高光分离。
要让 CSS 线性渐变模拟出逼真的光影照射效果，关键不在“加多少层”，而在于**光源方向的一致性**和**色标位置的精准控制**。人眼对光影逻辑非常敏感，哪怕一个渐变角度和高光层方向冲突，立体感就立刻崩塌。
光源方向必须统一
真实世界中，一束光从某个固定方向打来，所有高光、阴影都该服从同一角度逻辑：
- 若设定光源在左上方，那么高光渐变应使用 to bottom right（从左上往右下过渡），不是 to right 或 to bottom 单独使用
- 避免混用反向方向，比如上层用
to bottom、下层用to top——这会让人感觉“光从两个地方来”，失去统一光源感 - 推荐用角度值（如
315deg）代替关键字：315deg = 左上→右下，比to bottom right更精确，也方便多层渐变对齐
高光与阴影的色标要分层且克制
真实物体受光后，高光区域窄、过渡快，暗部则柔和延展。渐变里靠色标位置控制这种节奏：
- 锐利高光：用窄区间色标，例如
linear-gradient(315deg, transparent 0%, #fff 15%, transparent 30%) - 柔和过渡：把高光终点拉宽，如
transparent 0%, #fff 60%, transparent 90% - 底层暗部别用纯黑，选带色相的深灰（如
#2a2a3a），再叠一层微弱的同向渐变，增强体积感
用伪元素分层叠加，不挤在一个 background 里
单个 background 做不出层次，建议用 ::before 和 ::after 分工：
-
::before放主色调 + 底层明暗过渡（角度一致，低饱和度） -
::after放高光条（窄色标、高透明度白，skewX(-45deg)微调方向更自然） - 两层都设
background: linear-gradient(...)，但只动其中一层的left或transform实现光影滑过动画
别忽略环境光与材质反馈
纯白高光太假，需匹配对象材质：
- 金属感：加一点蓝调高光，如
rgba(200, 230, 255, 0.6) - 磨砂塑料：高光扩散宽、边缘虚，用大 blur-radius 配合径向渐变做辅助
- 按钮悬停时，可临时增强高光强度或缩小色标区间，强化交互反馈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
