关键在「分层 + 透明」：底层主色渐变定基调，上层浅色+transparent斜向渐变模拟高光，方向需匹配光源逻辑；避免径向渐变滥用，慎用border-radius与渐变裁剪冲突。
用 transparent 控制上层渐变透明度，让底层透出来
纯色叠加无法产生立体感，关键在「分层 + 透明」。CSS 多重渐变本质是多个 background 图层叠在一起，先写的在上，后写的在下。上层必须含 transparent 或半透明色（如 rgba(255,255,255,0.1)），否则会完全盖住底层。
常见错误：写成 linear-gradient(to bottom, #fff, #ccc) 放在前面，结果整个背景变灰白一片——因为没留透光通道。
正确做法是：
- 底层用主色渐变（如蓝→紫），定义整体色调
- 上层用浅色+
transparent斜向渐变，模拟高光区域 - 两层都写进同一个
background，用英文逗号分隔
线性渐变方向要匹配真实光源逻辑
立体感来自光影方向一致性。比如想模拟左上角打光，上层高光渐变就得用 to bottom right（从左上往右下过渡），而不是随便写 to right。
参数差异直接影响观感：
-
linear-gradient(to bottom right, transparent 0%, #fff 70%)：柔和扩散高光 -
linear-gradient(45deg, transparent 0%, #fff 20%, transparent 100%)：窄条状光斑，更锐利 - 角度值（如
25deg）比to xxx更精准，适合微调
别用 to top 配 to bottom 这类反向组合——人眼会感知冲突，失去“统一光源”感。
避免径向渐变滥用导致发虚
很多人一想“立体”，就加 radial-gradient 模拟球面光晕。但实际中它容易让边缘糊掉、层次变平。
真正有效的做法是限制它的作用范围：
- 只在按钮或卡片局部使用，例如
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 70%) - 配合
background-size缩小影响区域，比如设为120% 120%再background-position: center - 永远把它放在多重渐变的最上层，且透明度 ≤ 0.4；否则底层颜色全被洗掉
注意：radial-gradient 的 circle 和 ellipse 在高宽不等容器里表现差异极大，测试时务必用真实尺寸。
border-radius 和渐变层级必须同步考虑
圆角元素加多重渐变时，最容易忽略的是「渐变裁剪边界」。CSS 不会自动按圆角重新计算渐变走向，上层高光可能被截断在直角边缘，破坏立体连贯性。
解决方法只有两个：
- 把
border-radius值也写进上层渐变的background-clip（但兼容性差，仅现代浏览器支持） - 更稳妥的做法：用伪元素
::before单独承载上层渐变，并给它同样border-radius和overflow: hidden
还有一个隐藏坑：当 background 含多重渐变时，background-color 会被完全覆盖。如果想保留 fallback 色，得额外加一行 background-color: #f0f0f0，且必须写在 background 声明之前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
