linear-gradient需注意方向逻辑（如to top表示向上渐变）、角度单位（0deg=to top）、多色停靠点须显式标注百分比；radial-gradient需明确形状/大小/位置三要素顺序，用关键字控制扩散范围；二者坐标系统本质不同。
linear-gradient 怎么写才不翻车
直接用 background: linear-gradient(...) 就行，但方向和颜色停靠点写错，页面就“渐变不动”或“只显示一半”。常见错误是把 to top 当成“从上开始”，其实它表示“渐变方向朝上”，也就是颜色从下往上过渡——起始色在底部，结束色在顶部。
-
to bottom（默认）：起始色在上，结束色在下；to top则相反 - 角度单位是
deg，0deg=to top，90deg=to right，不是直觉里的“水平向右为 0” - 多色渐变时，如果不写百分比，浏览器会等分位置；但想让橙色占前 20%、绿色从 20% 开始，就得显式写
orange 0%, orange 20%, green 20% - 别漏写
background-image的完整属性名——只写background: linear-gradient(...)是合法的，但若同时设了background-color，记得它会被渐变覆盖（除非用透明色叠加）
radial-gradient 的形状、大小、位置怎么配准
radial-gradient 默认是椭圆（ellipse），在正方形容器里看不出区别，但一放到宽高不等的 div 里，就会拉伸变形。真正控制“圆不圆”“大不大”“偏不偏”的，是第一个参数里的三个要素：形状 + 大小 + 位置，顺序不能乱，且中间用空格隔开。
- 基础写法：
radial-gradient(circle at center, red, blue)—— 明确指定圆形、居中、无大小约束 - 大小关键字很关键：
closest-side让渐变刚好触到最近的边，farthest-corner则撑满到最远角；用像素值如50px也行，但响应式场景下推荐关键字 -
at top left不等于at 0 0，前者是关键词定位，后者是坐标定位（需带单位，如at 0px 0px），混用会失效 - 如果只写两个颜色却看到“中心一团色、四周大片白”，大概率是没设
background-size: cover或容器没设高度——径向渐变不会自动铺满，它按计算出的半径渲染，超出部分就是透明/背景色
linear 和 radial 渐变核心区别在哪
不是“线 vs 圆”这么表面——本质是坐标系统不同：linear-gradient 基于一条有方向的直线（1D 路径），所有颜色沿这条线排布；radial-gradient 基于极坐标（2D 扩散），颜色从一个点出发，按距离衰减或增强。
- 方向控制方式完全不同：linear 用角度或
to X，radial 用at X定中心 + 关键字定扩散范围 - 多色停靠点含义不同：linear 中
red 30%指“这条线上 30% 位置是红色结束点”；radial 中red 30%指“离中心点 30% 半径处红色结束” - 性能影响轻微但存在：radial 在高分辨率或动画中重绘成本略高，尤其用了
farthest-corner这类需实时计算的大小关键字时 - 兼容性一致：现代浏览器（Chrome 26+/Firefox 16+/Safari 6.1+）都原生支持，无需
-webkit-前缀
透明度叠加和重复渐变怎么安全用
想让渐变“透出底图”或做出条纹效果，得靠 rgba() 和 repeating-linear-gradient，但容易忽略 alpha 通道叠加逻辑和尺寸单位陷阱。
立即学习“前端免费学习笔记（深入）”；
- 用透明色做渐变时，
background-color会作为底层，background-image叠在其上；所以background: #333; background-image: linear-gradient(rgba(255,255,255,0.2), transparent)才能看清灰底上的浅白渐变 -
repeating-linear-gradient的颜色断点必须用**绝对单位**（px、em）或百分比，不能只写颜色；例如repeating-linear-gradient(45deg, red 0px, red 10px, blue 10px, blue 20px)表示每 20px 重复一次红蓝条纹 - 千万别在 repeating 渐变里混用
to bottom和像素值——方向关键词会覆盖尺寸逻辑，导致条纹消失或错位
最常被忽略的一点：渐变函数本身不触发重排，但若用 JS 动态改 background-image 的角度或颜色，频繁操作可能触发重绘；真要做动画，优先考虑 background-position 位移 + 固定渐变，或用 @property 配合 CSS 自定义属性动画。
