必须显式写出每个color-stop的位置和单位，否则浏览器会按默认等距分配或直接丢弃无单位色标；多色标同位置可实现硬边过渡，位置须单调递增，单位混用可能导致部分浏览器失效。
必须显式写出每个 color-stop 的位置和单位，否则浏览器会按默认等距分配，结果大概率不是你想要的。
color-stop 位置不写单位就失效
浏览器不会自动补 0% 或 px，漏单位等于删掉那个色标。比如 red 25 是非法值，Chrome/Firefox 直接丢弃，后续色标前移，blue 50% 可能变成实际 33% 位置。
-
red 0%、blue 50%、green 100%—— 安全，明确 -
red 0、blue 50、green 100—— 不推荐，部分 Safari 旧版本直接忽略整条声明 -
red 0%, blue, green 100%—— 中间blue没位置，浏览器按三等分（0%→33%→67%→100%）插值，不可控
多个色标重叠实现硬边过渡
同一位置写两个颜色，就能切断插值，形成色块交界。这是做条纹、分段色带、模拟像素风的核心手法。
-
red 40%, orange 40%→ 红到橙在 40% 处突变，无过渡 -
red 0%, red 20%, blue 20%, blue 40%→ 红块（0–20%）、蓝块（20–40%），中间无混合 - 顺序必须递增：
red 50%, blue 30%中blue 30%被忽略（所有主流引擎一致）
多层渐变叠加时，逗号是分隔符不是连接符
写成 background: linear-gradient(...), radial-gradient(...) 表示两层背景，不是“把 radial 塞进 linear 里”。第一层在上，第二层在下，上层必须含 transparent 或 rgba() 才能让底层透出。
- 错误：
background: linear-gradient(red, blue), #333→#333是纯色，完全盖住渐变 - 正确：
background: linear-gradient(45deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%), linear-gradient(to bottom, #224, #558) - 注意：IE 旧版不支持多层背景，降级方案需单独设
background-color
最容易被忽略的是「位置单位混用」——同一行里 red 0% 和 blue 100px 在某些 Safari 版本中会整体失效，统一用百分比最稳；另外，repeating-linear-gradient 的停止点必须构成完整周期（如 red 0, red 10px, blue 10px, blue 20px），否则重复逻辑会错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
