单层 linear-gradient() 无法实现金属感，因缺乏符合真实反光逻辑的明暗过渡；4色标渐变通过插入缓冲色标（如hsl(225,10%,45%)）实现缓入缓出，避免3色标的断层感；需配对设置 background-size: 200% 200% 与 background-position: 50% 50%，且文字金属感优先用多层 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 多层叠加比渐变更可靠。
- 必须显式写
-webkit-text-fill-color: transparent，否则 iOS Safari 不生效 - 基础色用
#ffd700（金色）或hsl(220,12%,70%)（冷灰）定调 - 推荐阴影组合：
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)
金属感不在色值多炫，而在明暗过渡是否符合真实反光逻辑——高光太刺像塑料，暗部太死像哑光漆，中间那层缓冲色标，才是区分真假的关键。最常被忽略的是：所有层都得有透明通道，且 background-position 的计算基准永远是 background-size，不是容器尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
