linear-gradient 多色停靠点需全写位置值以防错乱，如 #f00 0%, #ff0 50%, #00f 100%；方向推荐 to right；深色模式用 css 变量配合 prefers-color-scheme；避免多层叠加影响性能。
linear-gradient 里多个颜色停靠点怎么写才不乱
写多了容易把色标顺序搞反，或者漏掉单位，结果渐变断层、颜色突变。关键不是“能写出来”，而是“改起来不懵”。linear-gradient 的颜色列表本质是「位置驱动」：每个 color 后面跟的 length 或 percentage 决定它在哪停，没写就按等距分。
- 两个颜色不加位置 → 平滑过渡，没问题；三个及以上建议全写位置，比如
linear-gradient(to right, #f00 0%, #ff0 50%, #00f 100%) - 位置可以混用单位：
#f00 0（无单位=px）和#ff0 50%能共存，但别写#f00 0% 50%——语法错误，一个颜色只能有一个位置值 - 相邻色标位置相同时（如
#f00 20%, #ff0 20%），会形成硬边，这是实现“色块拼接”的合法技巧，不是 bug
方向参数 to right / 90deg / left 有什么实际区别
别信“to right 和 90deg 一样”这种笼统说法——它们在浏览器解析逻辑上走不同路径，遇到非标准尺寸或 transform 变形时表现可能不一致。
-
to right是关键词，语义明确，可读性好，推荐日常使用 -
90deg是角度值，从正 x 轴逆时针算，0deg=to top，90deg=to right，但某些老版本 Safari 对角度支持有偏差 -
left是无效值，会退回到默认to bottom，别手误写成to left（正确是to left，但极少用）
渐变色方案要适配深色模式怎么办
CSS 变量 + @media (prefers-color-scheme: dark) 是目前最稳的组合，直接在渐变里用变量，避免重复写两套 linear-gradient。
- 先定义变量：
:root { --grad-start: #3498db; --grad-end: #2c3e50; } - 渐变中引用：
background: linear-gradient(to bottom, var(--grad-start), var(--grad-end)); - 深色模式覆盖：
@media (prefers-color-scheme: dark) { :root { --grad-start: #2c3e50; --grad-end: #1a252f; } } - 注意：不要在
linear-gradient里直接写var(--color) 0%, var(--color2) 100%却忘了给变量设默认值，否则降级时整个渐变失效
性能差？可能是用了太多渐变层叠或高分辨率背景
单个 linear-gradient 几乎没性能压力，但叠加 3 层以上、又铺满视口时，尤其在低端安卓机上，可能出现滚动卡顿或内存飙升。
- 检查是否无意写了多层渐变：
background: linear-gradient(...), linear-gradient(...), url(...)—— 每多一层都增加合成负担 - 避免用渐变模拟复杂图案（比如条纹、网格），该用
repeating-linear-gradient就用，别硬堆多个linear-gradient - 如果只是做按钮悬停效果，确保只在
:hover里触发，而不是默认渲染所有状态
渐变真正难的不是写法，是设计意图和 CSS 渲染行为之间的缝隙——比如你以为 40% 处该是纯色，结果因为插值算法，人眼看到的是轻微过渡。调色时别只看 DevTools 颜色 picker，一定要在真机、不同亮度下瞄一眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
