linear-gradient() 是 background-image 的值，需配合颜色停止点使用；方向可写 to right 或 45deg 等，不写默认 to bottom；颜色透明度表达方式须统一；简写 background 会清空渐变，应单独设 background-image 或将渐变置于 background 值最前。
linear-gradient() 基本语法和方向写法
linear-gradient() 不是 CSS 属性，而是 background 或 background-image 的值。它必须配合颜色停止点（color stop）使用，否则无效。
方向可以写关键词（如 to right）、角度（如 45deg），注意：关键词前必须带 to，角度默认顺时针从正上方（0deg）开始算。
-
to right等价于90deg，从左到右渐变 -
to bottom等价于180deg，从上到下渐变 - 不写方向时默认为
to bottom（不是180deg，但效果相同）
颜色参数支持多种格式，但不能混用单位
每个颜色停止点可写 rgb()、hsl()、十六进制（#fff）、英文名（red），也可加透明度：rgba()、hsla()、或用 color-mix()（较新，兼容性差）。
关键限制：同一组渐变中，所有颜色的 alpha 表达方式需一致。比如不能一半用 rgba(0,0,0,0.5)，一半用 #0008（后者是 8 位 hex，等价于 rgba(0,0,0,0.5)），但浏览器可能解析不一致——Chrome 支持，Firefox 旧版会忽略 #0008。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
rgba()或统一用 8 位 hex（如#ff000080）来控制透明度 - 避免在同一个
linear-gradient()中混用hsl(0, 0%, 0%)和#000——虽能工作，但可读性和维护性差 - 颜色后可跟位置，如
red 20%、blue 100px，单位必须明确，百分比基于容器宽高（非渐变长度）
常见错误：背景被覆盖、渐变不显示、边缘出现白边
最常被忽略的是：渐变作为 background-image，若同时设了 background-color，后者会垫底，但不会“遮住”渐变；而如果写了 background: red; 这种简写，它会**清空** background-image，导致渐变消失。
- 用
background-image: linear-gradient(...);单独设置，再用background-color设底色（安全） - 若用简写
background，必须把渐变写在最前面，例如：background: linear-gradient(to right, #000, #fff), #333;—— 后面的#333是 fallback 背景色，仅当渐变失效时生效 - 渐变默认铺满整个元素，但若容器有
padding或border，且未设background-clip，渐变可能延伸到 padding 区域，造成视觉偏差；此时加background-clip: padding-box;
多色停点与硬边过渡技巧
两个颜色之间默认平滑过渡，但可通过重复位置实现“硬切”。例如 red 50%, blue 50% 就会在中点突变，无混合带。
background-image: linear-gradient( to right, #f00 0%, #f00 50%, #00f 50%, #00f 100% );
这种写法常用于模拟分割线、状态条分段、或图标背景。注意：相邻两个停点位置相同时，浏览器会取后一个颜色；位置不按顺序写（如 70%, 30%）会导致未定义行为，应始终升序排列。
停点位置允许省略，浏览器自动均分，但一旦指定某个位置，其他未指定的位置就不再均分——比如 red, yellow 70%, blue 中，red 默认是 0%，blue 默认是 100%，中间只有一段过渡。
渐变本身不触发重排，但频繁修改颜色或方向（尤其用 JS 动态改）可能触发重绘；真要动画，优先用 background-position 移动渐变图案，而不是改 linear-gradient() 参数。
