background-color仅支持纯色，不支持渐变；它接受十六进制（如#ff6b6b）、rgb()、rgba()、hsl()等标准颜色值，其中rgba()可设透明度，但渐变必须用background-image实现。
直接用 background-color 设置单色背景，用 linear-gradient() 或 radial-gradient() 实现渐变——现代浏览器已原生支持，无需前缀，也不必 fallback 到图片。
background-color 能设哪些颜色值？
它接受所有标准 CSS 颜色表示法，但不同写法影响可维护性和扩展性：
-
#ff6b6b（六位十六进制）最常用，简写#f6b仅当每对数字相同时才有效 -
rgb(255, 107, 107)适合需要动态计算的场景（比如 JS 控制亮度），但不带透明度 -
rgba(255, 107, 107, 0.8)才能控制半透，background-color本身不支持 alpha 通道以外的渐变逻辑 -
hsl(0, 70%, 70%)更符合人眼直觉调色，适合设计系统中统一管理主色系
注意：background-color 只作用于元素的「纯色背景层」，它会被后续设置的 background-image（包括渐变）完全覆盖——除非你显式叠加，例如：background: #fff url(img.png), linear-gradient(to right, red, blue);
linear-gradient() 的方向参数怎么选？
方向决定渐变轴线走向，错误写法会导致效果反直觉或被忽略：
-
to right是从左到右，不是「向右延伸」；to top是从下到上，不是「向上拉伸」 - 角度写法如
45deg更精确，0deg =to bottom，90deg =to right，负角也合法（如-30deg） -
to bottom right和to right bottom等价，但bottom right（缺to）是无效语法，浏览器会忽略整条声明 - 老式写法如
top、left top已废弃，仅 IE10 支持，现代项目应避免
常见误配：给一个窄高容器用 to right，结果几乎看不出渐变——此时换 to bottom 或改用角度更合理。
radial-gradient() 怎么控制圆心和形状？
径向渐变默认以元素中心为圆心、椭圆铺满，但多数设计需要手动干预：
- 圆心位置用
at关键字：例如radial-gradient(circle at top left, red, blue)把起点定在左上角 - 形状用
circle（正圆）或ellipse（默认，宽高比匹配容器），closest-side等尺寸关键词已不推荐，兼容性差 - 颜色停止点必须至少两个，单色如
radial-gradient(red, red)等效于纯色，无实际意义 - 多层叠加时，用逗号分隔多个渐变：
background: radial-gradient(...), linear-gradient(...);，顺序靠前者在上层
容易被忽略的是：径向渐变的「尺寸」受容器宽高比强烈影响。一个 circle 在正方形容器里是圆，在长条容器里会被拉成椭圆——除非显式指定 circle at center 并配合 background-size 限制范围。
渐变背景在真实页面中要注意什么？
写对语法只是第一步，上线后常因细节失效：
- body 默认有 margin，导致渐变背景边缘露白：必须加
body { margin: 0; }或重置通配符 - 渐变作为
background-image时，background-repeat: no-repeat是默认行为，不用额外写；但若叠加图片，需明确各层 repeat 规则 - 文字在浅色渐变上可能可读性差：别只依赖视觉检查，用浏览器开发者工具的「颜色对比度」检测功能验证 WCAG AA 标准
- 动画渐变（如流动背景）务必用
background-size: 200% 200%+background-position动画，直接 animatingbackground值会导致重绘卡顿
最隐蔽的问题：渐变函数里的颜色值如果写错格式（比如漏掉 # 或括号不匹配），整条 background 声明会被浏览器静默丢弃——检查 computed styles 比肉眼看渲染更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
