linear-gradient函数需带to关键字指定方向，颜色停靠点须顺序递增且单位合法，推荐用rgba()控透明度并设background-color fallback。
linear-gradient 函数的基本写法和方向控制
渐变背景不是靠多张图片拼的，linear-gradient 是 CSS 原生函数，核心是「起点→终点」的方向 + 颜色断点。方向不写默认从上到下（等价于 to bottom），但很多人卡在方向写错或漏写 to 关键字。
-
to top、to right、to bottom left这类写法必须带to，写成top或right（无to）会被浏览器当成角度值处理，结果完全不对 - 用角度时，
0deg是从下到上（和to top一致），90deg是从左到右（和to right一致），别凭直觉记反 - 颜色停靠点可以省略位置，比如
linear-gradient(red, blue)会自动均分；但一旦加了中间色，比如red, #fff, blue，建议显式写位置（如red 0%, #fff 50%, blue 100%），否则不同浏览器插值逻辑可能有细微差异
多个颜色断点的实际配置和常见错位现象
渐变看起来“断层”或“色块突兀”，八成是停靠点没对齐，或者用了不支持的单位。CSS 渐变里的位置值只接受 %、px、em 等绝对/相对长度，不支持 vh、vmax 等视口单位（部分新版本开始支持，但兼容性差）。
- 两个相邻颜色的位置不能倒置，比如
red 80%, blue 20%会导致渲染异常，浏览器可能直接忽略该渐变声明 - 停靠点不必从
0%开始或以100%结束，但超出范围的部分不会渲染（如red -10%, blue 110%，实际只取中间重叠段） - 想让某段颜色“占满”，就让前后两个停靠点位置相同：例如
red 30%, yellow 30%, yellow 70%, blue 70%，就能做出红→黄→黄→蓝的硬切效果
透明度控制和 fallback 兼容写法
用 rgba() 或 hsla() 写颜色本身就能带透明度，但别用 transparent 关键字混搭——它在部分旧版 Safari 中表现不稳定，且和 alpha 通道叠加逻辑不一致。
- 推荐统一用
rgba(255, 0, 0, 0.5)而不是red加transparent拼接 - IE9 及以下不支持
linear-gradient，如果必须兼容，得加filter低阶语法（已废弃，仅作兜底），但更现实的做法是提供纯色background-color作为 fallback：background-color: #f0f0f0;<br>background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);
- 注意
background-color会盖住background-image的透明区域，所以 fallback 色最好和渐变首尾色之一接近，避免视觉跳变
性能与响应式场景下的注意事项
渐变本身几乎不占渲染资源，但滥用动态生成（比如 JS 拼字符串塞进 style）或高频重绘（如 scroll 里反复改 background-image）会触发重排重绘。另外，用百分比位置时，容器尺寸变化不会自动重算渐变断点——它只在声明时解析一次。
立即学习“前端免费学习笔记（深入）”；
- 不要在
@keyframes里写带百分比停靠点的linear-gradient并期望它随动画缩放，那只会固定拉伸，不会“跟着动” - 需要响应式渐变（比如横屏竖屏方向不同），用媒体查询切换方向更可靠：
@media (orientation: landscape) { background-image: linear-gradient(to right, ...); } - 真要 JS 控制，优先改 class 名称，而不是直接操作
element.style.backgroundImage，减少内联样式的维护成本
to，停靠点顺序不能乱，以及 background-color fallback 不是可有可无的装饰。 
