在CSS3中，渐变如果严格按基础类型来算是2种，即线性渐变和径向渐变；如果按开发中常见的函数写法来算，通常是4种，包括两种基础渐变和两种重复渐变。先把这个口径说清楚，再看后面的分类和使用场景，就不容易混淆。

从传统CSS3语境来说，渐变的基础类型主要有两种：线性渐变和径向渐变。线性渐变是颜色沿着一个方向平滑过渡，比如从上到下、从左到右或按角度变化；径向渐变则是从中心点向四周扩散，形成圆形或椭圆形的颜色过渡。这两类已经覆盖了大多数页面背景、按钮高光、卡片层次和横幅装饰的需求。

• 线性渐变：linear-gradient()
• 径向渐变：radial-gradient()

如果按实际编码时常用的CSS函数来统计，很多教程会把渐变分成四种，因为在线性渐变和径向渐变之外，还有各自对应的重复版本。这里的关键区别是：重复渐变本质上不是新的基础方向，而是在原有线性或径向渐变上加入重复铺开的能力，因此它既可以不单独算类型，也可以在函数写法层面单独统计。重复渐变适合做条纹背景、网格纹理、进度区分和规则重复的装饰效果。

• linear-gradient()：普通线性渐变
• radial-gradient()：普通径向渐变
• repeating-linear-gradient()：重复线性渐变
• repeating-radial-gradient()：重复径向渐变

线性渐变最适合需要明确方向感的界面，比如按钮背景、导航栏、横向横幅和卡片遮罩，因为它能控制颜色沿角度变化。径向渐变更适合做聚焦、光晕、球面感和中心扩散效果。重复线性渐变常用于细条纹、分隔纹和规则背景，重复径向渐变则适合波纹、靶心和重复圆环一类的视觉图案。选型时先看页面需要方向过渡还是中心扩散，再决定是否要重复。

• 按钮和横幅常用线性渐变
• 光晕和聚焦效果常用径向渐变
• 条纹背景适合重复线性渐变
• 圆环和波纹适合重复径向渐变

如果题目、考试或基础知识问答强调的是CSS3渐变有几种，通常优先回答2种，因为这是按基础类型统计；如果问题放在实际开发、函数写法或API使用场景里，则可以回答常见写法有4种。判断标准可以简单理解为：重复渐变如果被看作在线性或径向基础上的扩展能力，就答2种；如果被看作独立函数写法来统计，就答4种。这样回答时既有结论，也有边界，不容易在面试、学习或写文章时产生歧义。书写代码时还要注意颜色顺序、方向参数和兼容写法，不过在当前常见浏览器环境里，标准写法通常已经能够满足需求。

• 问基础类型时回答2种
• 问常见函数写法时回答4种
• 基础类型看线性和径向，函数写法再加两个repeating版本

所以，css3中渐变的直接答案可以这样说：按基础类型算是2种，按开发中常见的函数写法算是4种。只要先说明统计口径，再根据场景回答，就不会把这个问题说得模糊不清。

《夸克》非常好用的免费AI浏览器

下载APP查看