html本身不支持渐变，需用background: linear-gradient()等css函数实现；必须写to方向、带角度单位、逗号分隔颜色；background-image更严谨，配合background-size: cover防拉伸，ie需-ms-前缀及色值fallback。
HTML 本身不支持渐变，所谓“一行 CSS 实现渐变背景”，实际是指用单条 background 声明配合 linear-gradient() 或 radial-gradient() 函数完成，无需额外 HTML 标签或 JS。
用 background: linear-gradient() 写最简可行渐变
这是最常用、最直白的写法，直接覆盖元素默认背景色。关键不是“一行”，而是避免写错语法导致失效。
-
to right、to bottom等方向关键词必须带to，写成right或bottom会被忽略 - 角度单位不能省：写
45deg，不能只写45；0deg是从上到下（等价于to bottom），不是从左到右 - 颜色之间必须用英文逗号分隔，末尾不能多加逗号，否则整条声明被丢弃
- 示例：
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
为什么 background-image: linear-gradient() 更严谨？
linear-gradient() 返回的是一个 <image></image> 类型值，语义上属于图像，不是颜色。虽然 background 简写能兼容，但显式用 background-image 更准确，尤其当你同时设置 background-color 作降级时：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 避免和
background-color冲突：如果只写background: linear-gradient(...)，它会清空background-color、background-position等所有子属性 - 更易叠加 fallback：
background-color: #ff9a9e; background-image: linear-gradient(135deg, #ff9a9e, #fad0c4);在不支持渐变的老浏览器中自动回退 - 多层渐变也靠它：用逗号拼多个 gradient，必须用
background-image
background-size: cover 不是可选项，是必填项
没加这句，渐变在不同屏幕尺寸下极易拉伸、重复或只显示一角——尤其用在 body 或全屏容器时。
- 默认行为是按元素原始尺寸渲染渐变图，不是“铺满视口”
-
background-repeat: no-repeat单独用没用，必须配background-size: cover或100% 100% - 若加了
background-attachment: fixed后滚动卡顿，优先检查是否因cover触发重绘开销，Safari 尤其敏感
IE10–11 兼容不能只靠 Autoprefixer
现代构建工具默认不处理 -ms- 前缀，而 IE10–11 只认 -ms-linear-gradient()，且顺序必须严格：
- fallback 色要写在最前：
background: #ff9a9e; - 然后是 IE 专用：
background: -ms-linear-gradient(135deg, #ff9a9e, #fad0c4); - 最后才是标准写法：
background: linear-gradient(135deg, #ff9a9e, #fad0c4); - IE10 不支持 rgba() 透明度，用
hsla()也不行，只能换浅色系逼近效果
真正容易被忽略的，是把渐变当纯色用——漏掉 background-size 或混用 background 简写覆盖了其他背景控制项，结果在响应式场景下渐变突然“缩成一团”或“平铺出奇怪条纹”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
