金属感关键在明暗过渡逻辑：4色标渐变（如135deg, hsl(210,15%,95%), hsl(220,12%,70%), hsl(225,10%,45%), hsl(230,8%,25%)）比3色更稳，第3色标hsl(225,10%,45%)为缓冲关键；需配background-size:200% 200%与background-position:50% 50%控高光位移；文字金属慎用background-clip:text，推荐text-shadow多层叠加。
单层 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-clip: text），还要加-webkit-background-clip: text和color: transparent，否则高光被文字底色盖住 - 注意：
background-position的百分比是相对于background-size计算的，不是元素本身——设了200% 200%后，100% 100%实际对应渐变图层右下角移到元素右下角
文字金属质感慎用 background-clip:text
文字边缘抗锯齿会吃掉高光细节，导致“闪亮感”消失。真要上金属文字，text-shadow 多层叠加比渐变更可靠。
立即学习“前端免费学习笔记（深入）”；
- 基础色用
#ffd700（金色）或hsl(220,12%,70%)（冷灰）定调 - 加两层无模糊阴影勾勒厚度：
-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) - 别忘了关掉默认文字颜色：
-webkit-text-fill-color: transparent必须显式写，否则 iOS Safari 不生效
金属感不在色值多炫，而在明暗过渡是否符合真实反光逻辑——高光太刺像塑料，暗部太死像哑光漆，中间那层缓冲色标，才是区分真假的关键。
