CSS中linear-gradient()是类型，必须用background-image（或简写background）应用；background-color仅支持单色，无法实现渐变过渡，但可作降级兜底。
直接用 background 或 background-image 属性，核心是传入 linear-gradient() 函数值。不是新增属性，而是把渐变当“图片”塞进背景里。
为什么是 background-image 而不是 background-color
background-color 只接受单色，不支持过渡；linear-gradient() 返回的是 <image></image> 类型，必须通过 background-image（或简写的 background）应用。浏览器把它当作一张动态生成的背景图来渲染。
- 写
background: linear-gradient(...)是最常用写法，它会自动覆盖background-image，同时清空background-color - 如果需要叠加渐变和图片，必须显式用
background-image: linear-gradient(...), url(...) - 单独设
background-color会被渐变遮住，但建议保留作为降级兜底（老浏览器忽略渐变时显示纯色）
linear-gradient() 必须带方向参数吗
不强制，但强烈建议显式写出。省略时默认为 to bottom（等价于 180deg），但不同团队/项目习惯不一，容易误判。
- 用关键词更直观：
to right、to bottom right、to top left - 用角度更可控：
45deg（左下→右上）、135deg（左上→右下） - 注意：
0deg指向上，不是向右——这点和 CSS 动画rotate()的直觉相反，容易写错
颜色停靠点写百分比还是像素
优先用百分比，语义清晰且响应式友好。像素值只在需要精确对齐某元素（如图标边框）时才用。
立即学习“前端免费学习笔记（深入）”；
-
linear-gradient(to right, #f00 0%, #0f0 50%, #00f 100%)：三色均匀分布 -
linear-gradient(to right, #f00 20%, #0f0 20%, #00f 80%)：红绿在 20% 处硬切，绿到蓝缓慢过渡 - 两个相邻色标位置相同时（如
#f00 30%, #0f0 30%），产生突变而非渐变 - 漏写位置（如
#f00, #0f0 70%, #00f）时，首尾默认 0% / 100%，中间按剩余空间均分——行为不可控，别依赖
实际部署时最容易被忽略的一点
渐变本身没有“透明通道”，但 rgba() 或 hsla() 颜色值里的 alpha 通道是生效的。很多人试了 transparent 没效果，其实是写成了 background: linear-gradient(to right, #f00, transparent) —— 这里 transparent 等价于 rgba(0,0,0,0)，但起始色没设 alpha，导致过渡生硬。真正要半透，得统一用 rgba(255,0,0,0.8) 和 rgba(0,0,0,0) 才能自然淡出。
