关键在角度值匹配真实光源逻辑，45deg对应to bottom right实现左上打光；透明层叠是立体感前提，需底层主色渐变+上层含transparent的斜向高光渐变，方向统一且逗号分隔。
关键在角度值要匹配真实光源逻辑，配合透明层叠才能做出有方向感的立体光影。
角度决定光源方向，不是随便写的数字
角度以元素中心为原点，顺时针计算：0deg 指向上（从下到上），90deg 指向右（从左到右），45deg 就是左上→右下。想模拟左上角打光，高光层就得用 45deg 或 to bottom right；若用 135deg，光就从右上来了，和底层阴影不统一，人眼会感觉“别扭”。
- to top ≡ 0deg｜to right ≡ 90deg｜to bottom ≡ 180deg｜to left ≡ 270deg
- to bottom right ≡ 45deg（不是 135deg）
- to top right ≡ -45deg（或 315deg）
- 动画中建议用 0deg → 1turn，比 0deg → 360deg 更语义清晰
透明层叠是立体感的前提
单层渐变只是颜色过渡，没有光影层次。真正立体效果靠的是「分层 + 透明」：底层用主色渐变定基调，上层用浅色+transparent斜向渐变模拟高光，且上层必须含 transparent 或半透明色（如 rgba(255,255,255,0.1)），否则会完全盖住底层。
- 错误写法：linear-gradient(to bottom, #fff, #ccc) 放前面 → 整个背景灰白一片（没留透光通道）
- 正确结构：background: linear-gradient(180deg, #4a3a8c, #7d5ab0), linear-gradient(45deg, transparent 0%, #fff 70%);
- 注意逗号分隔，先写的在上，后写的在下
微调光影形态，靠角度+位置双控制
角度定方向，颜色位置定范围。同一 45deg 角度，不同停靠点会产生截然不同的高光观感：
- linear-gradient(45deg, transparent 0%, #fff 20%, transparent 100%) → 窄条状光斑，锐利
- linear-gradient(45deg, transparent 0%, #fff 70%, transparent 100%) → 柔和扩散高光
- 还可加像素定位：#fff 30px，适合固定尺寸容器
避免常见方向冲突
不要混用反向逻辑——比如底层用 to bottom（180deg）做阴影，上层却用 to top（0deg）做高光，人眼会感知光源矛盾，失去统一感。所有渐变层的方向关键词或角度值，应指向同一虚拟光源区域。
- 慎用径向渐变模拟高光：它天然发散，容易破坏线性光影一致性
- border-radius 与斜向渐变叠加时，边缘可能被裁剪失真，需测试实际渲染
- transparent 在渐变里“看不见”，往往是因为没设 background-color 作 fallback
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
