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