CSS渐变唯一写法是background-image: linear-gradient()；必须用background-image而非background简写，方向参数不可省略，IE9及以下不支持，移动端旧Safari需-webkit前缀。
background-image: linear-gradient() 是唯一靠谱写法
CSS 里没有 background-color-gradient 这种属性，所有“渐变色”都得靠 background-image 实现。用 background-color 混搭渐变只会覆盖掉渐变——这是新手最常卡住的地方。
实际写法就一条路：background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);。注意两点：一是必须写 background-image，不是 background 简写（除非你确定没其他背景图要叠）；二是方向参数如 to right 或 90deg 别漏掉，否则默认是 to bottom，容易和预期相反。
- 别写
background: linear-gradient(...)——它会清空可能已设的background-image或background-size - IE10+ 才支持标准语法，IE9 及更早版本不认
linear-gradient()，连前缀都不行 - 移动端 Safari 旧版（iOS 6–9）需要
-webkit-linear-gradient()前缀，但现在基本可忽略
径向渐变 radial-gradient() 的坑在圆心定位
radial-gradient() 默认从元素中心发散，但很多人想让它从左上角开始，结果写成 radial-gradient(ellipse at top left, ...) 却没效果——问题出在单位缺失或关键字拼错。
关键点：位置参数必须用明确的关键词（top、center、bottom、left、right）或带单位的数值（20px 30px），不能混用，比如 top left 合法，top, left 就报错。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
radial-gradient(at top, left, #fff, #000)→ 多了个逗号，直接失效 - 正确写法：
radial-gradient(circle at 20px 20px, #fff, #000)或radial-gradient(ellipse at top right, #fff, #000) - 如果只写
radial-gradient(#a0c4ff, #f6f6f6)，浏览器按默认ellipse at center渲染，别以为它“没生效”
渐变做边框时 background-clip + padding 是刚需
想让边框本身是渐变色？border 属性不接受渐变。真能实现的方案只有一个：background-image 配合 background-clip: padding-box 和留出 padding，再用 border “压”出视觉边框效果。
原理是：把渐变画在内边距区域，然后用纯色 border 盖住外层，再通过 background-clip 把渐变裁剪到 padding 区域，看起来就像边框在渐变。
- 必须设
padding（比如padding: 2px），否则没空间画渐变 - 必须加
background-clip: padding-box，否则渐变会铺满整个元素（包括 border 下面） - 别碰
border-image——它虽然支持渐变，但兼容性差（Firefox 不支持border-image-source: linear-gradient()），且行为难控
颜色停靠点（color stop）写错会导致断层或突变
渐变里两个颜色之间不是自动平滑过渡的，中间每一段都由“颜色停靠点”定义。漏写、重复写、单位混用，都会让渲染出人意料。
比如 linear-gradient(to right, red, yellow 50%, blue) 是标准三段式；但如果写成 red 20%, yellow 20%, blue，就会在 20% 处出现红黄硬切，没有过渡——这不是 bug，是规范要求。
- 百分比停靠点必须递增，
red 80%, yellow 20%会被浏览器自动纠正为red 20%, yellow 80%，但别依赖这个 - 像素值停靠点（如
red 10px）在响应式布局里容易失准，优先用百分比 - 三个及以上颜色时，中间点不写位置也行（浏览器等分），但一旦写了某个位置，其他点最好也明确，避免歧义
渐变看着简单，但每个参数都在暗处咬人。最常被忽略的是 background-clip 和停靠点顺序——改完没效果，八成栽在这两处。
