conic-gradient仅适用于旋转对称金属部件；用于非环形结构会丢失方向性致质感塑料化，且需严守冷调起始色、≤15°色相差、background-size/position三约束。
conic-gradient 不适合模拟大多数金属质感，除非你明确在做旋转对称部件（如螺丝头、齿轮中心、徽章外环）。把它当“金属专用渐变”用，是常见误判——方向错，质感直接变塑料。
什么时候该用 conic-gradient 做金属效果
只在以下场景才真正需要它：
- 元素本身是圆形/环形，且高光需绕中心均匀发散（比如奥运五环中的单个环、金属按钮的凹陷中心）
- 要模拟镜面反射在曲面上的环形衰减（如抛光球体顶部反光）
- 配合
mask或clip-path做径向遮罩时，需要角度控制边界过渡
若目标是拉丝不锈钢面板、铝制机箱侧板、或文字表面的扫光感，conic-gradient 会丢失方向性，导致反光“晕开”，失去金属应有的线性张力。
conic-gradient 写金属色的三个硬约束
即使符合使用场景，也必须守住这三条线，否则颜色会发灰或打滑：
- 起始色标必须带轻微冷调（如
hsl(200, 10%, 92%)），不能用纯白——纯白在 conic 中极易过曝，边缘泛青失败 - 终止色标与起始色标色相差不能超过 15°，否则会出现可见色阶断层；推荐用
hsl(208, 8%, 22%)收尾，比纯黑更稳 - 必须加
background-size: 150% 150%并配background-position: center，否则 conic 渐变默认以左上为原点，中心偏移后高光位置失控
为什么 linear-gradient 在绝大多数情况下更可靠
真实金属的视觉特征是方向性反射：光线沿某个轴线拉出高光带，暗部顺延衰减。而 conic-gradient 的天然属性是「无方向中心辐射」，它不描述“从哪来”，只回答“绕哪转”。
对比实操：
-
linear-gradient(135deg, ...)可精准复现拉丝铝板的斜向纹路 -
conic-gradient(from 0deg, ...)即使参数调得再细，也无法让高光停在右上角不动——它总会绕圈 - 浏览器渲染
conic-gradient的性能开销比linear-gradient高 20%～30%，尤其在动画中易掉帧
如果你正在调试一个“怎么都像镀铬玩具”的按钮，先检查是否误用了 conic-gradient ——换回 linear-gradient 并把角度设成 120deg 到 150deg，大概率立刻找回金属的筋骨感。
真正难的不是选哪个渐变函数，而是理解：金属质感从来不是颜色本身，而是明暗走向、色相偏移、尺寸缩放三者咬合的结果。conic-gradient 是一把专用刀，别拿来削苹果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
