4色标渐变比3色标更稳，因第4色标作为缓冲锚点使明暗过渡呈缓入缓出；background-size与position须配对设置，文字金属质感宜用text-shadow多层叠加而非background-clip:text。
单层 linear-gradient() 永远做不出金属感——不是颜色选错，是明暗过渡逻辑没搭对。
为什么 4 色标比 3 色标更稳
3 色渐变在中段容易出现“断层感”：人眼会捕捉到两个色块之间的生硬过渡，尤其在大尺寸按钮或斜向文字里。加第四个色标，本质是插入一个微调锚点，把“本体色→暗部”的衰减曲线从线性变成缓入缓出。
- 典型错误是把第四个色标设成和第三个一样，结果只是多画了一道重复色带，毫无作用
- 推荐结构：
linear-gradient(135deg, hsl(210,15%,95%), hsl(220,12%,70%), hsl(225,10%,45%), hsl(230,8%,25%)) - 第 3 个色标
hsl(225,10%,45%)是关键缓冲：比第 2 个更暗但未到深色，比第 4 个更亮但已显阴影 - 所有色标位置不写百分比，默认等距；若要强调高光区域，可显式写
0%, 30%, 70%, 100%
background-size 和 background-position 必须配对设
不设 background-size，渐变默认铺满元素，高光一动就消失；不配 background-position，位移起点错乱，扫光歪斜、文字糊边都是它惹的祸。
-
background-size: 200% 200%是底线，让渐变区域足够宽，位移才有空间 -
background-position: 50% 50%把高光锚点居中，再配合动画才可控 - 注意：
background-position的百分比是相对于background-size计算的，不是元素本身——设了200% 200%后，100% 100%实际对应渐变图层右下角移到元素右下角 - 文字金属慎用
background-clip: text：文字边缘抗锯齿会吃掉高光细节，导致“闪亮感”消失；真要上金属文字，text-shadow多层叠加比渐变更可靠
文字金属质感别碰 background-clip:text
哪怕你把 linear-gradient() 写得再准，只要用了 background-clip: text，iOS Safari 或 Chrome 都可能糊掉高光边缘。这不是 bug，是渲染管线对亚像素抗锯齿的妥协。
- 必须显式写
-webkit-text-fill-color: transparent，否则 iOS Safari 不生效 - 推荐替代方案：
text-shadow四层叠加 —— 先用两层无模糊阴影勾勒厚度：-1px -1px 0 #b38b00,1px 1px 0 #8b6508；再叠一层半透明高光：-2px -2px 5px rgba(255,255,255,0.6)；最后补一层模糊暗影：4px 4px 6px rgba(0,0,0,0.3) - 所有 shadow 颜色需与主色调系一致，冷灰就别混暖黄，否则金属感瞬间垮掉
真正卡住效果的，从来不是色值本身，而是第三色标的位置精度、background-size 与 background-position 的比例关系、以及文字场景下对 text-shadow 的耐心调试——这些地方差 5%，视觉上就差一个材质等级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
