CSS中linear-gradient()是类型，必须用background-image（或简写background）应用；background-color仅支持单色，无法实现渐变过渡，但可作降级兜底。

直接用 background 或 background-image 属性，核心是传入 linear-gradient() 函数值。不是新增属性，而是把渐变当“图片”塞进背景里。

为什么是 background-image 而不是 background-color

background-color 只接受单色，不支持过渡；linear-gradient() 返回的是 类型，必须通过 background-image（或简写的 background）应用。浏览器把它当作一张动态生成的背景图来渲染。

• 写 background: linear-gradient(...) 是最常用写法，它会自动覆盖 background-image，同时清空 background-color
• 如果需要叠加渐变和图片，必须显式用 background-image: linear-gradient(...), url(...)
• 单独设 background-color 会被渐变遮住，但建议保留作为降级兜底（老浏览器忽略渐变时显示纯色）

linear-gradient() 必须带方向参数吗

不强制，但强烈建议显式写出。省略时默认为 to bottom（等价于 180deg），但不同团队/项目习惯不一，容易误判。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 用关键词更直观：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) 才能自然淡出。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！