Background - CSS 最强属性之一(1)本文深入讲解 CSS background 渐变函数的核心用法。带你

在 CSS 的众多属性中，background 堪称最强大、最具表现力的属性之一。它不仅能设置简单的背景颜色和图片，更能通过渐变函数创造出令人惊艳的视觉效果——从优惠券的缺口造型、警示条纹图案，到饼图统计、加载动画，甚至是复杂的几何纹理，这些都可以纯 CSS 实现，无需任何图片资源。

本文将深入探讨 CSS 的三大渐变函数：

线性渐变 linear-gradient() —— 沿直线方向过渡
径向渐变 radial-gradient() —— 从中心点向外辐射
角向渐变 conic-gradient() —— 围绕中心点旋转

每个渐变函数我们都会先讲解语法，再通过实战案例演示其强大用法。

1. 线性渐变 `linear-gradient()`

线性渐变沿着一条直线方向进行颜色过渡，是最常用的渐变类型。

1.1 语法详解

根据 MDN linear-gradient() 文档，其语法如下：

linear-gradient(
  [ <angle> | to <side-or-corner> ]?,
  <color-stop-list>
)

参数说明：

参数	说明	示例
`<angle>`	渐变线的方向角度。`0deg` 表示从下到上，角度顺时针增加	`45deg`, `-60deg`, `90deg`
`to <side-or-corner>`	使用关键字指定方向	`to right`, `to bottom left`
`<color-stop>`	颜色及其位置，格式为 `<color> [<length-percentage>]?`	`red`, `blue 50%`, `#fff 30px`

多位置语法

CSS Images Level 4 引入了多位置语法，一个颜色可以同时指定两个位置：

/* 传统写法 */
linear-gradient(red 0%, red 50%, blue 50%, blue 100%)

/* 多位置简写 */
linear-gradient(red 0% 50%, blue 50% 100%)

1.2 案例：透明渐变色 —— 文字淡出效果

在阅读类应用中，我们经常看到"查看更多"的折叠效果——长文本被截断，底部有一个渐变遮罩引导用户展开。

核心原理

transparent 是一个完全透明的颜色值（等价于 rgba(0,0,0,0)），将它与实色结合，就能创造出淡入淡出的效果：

background: linear-gradient(transparent, #fff);

实战代码

.text-fade {
  position: relative;
  max-height: 4.5em;
  overflow: hidden;
}

.text-fade::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5em;
  /* 核心：从透明渐变到白色 */
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

技术要点：

使用 ::after 伪元素创建遮罩层
position: absolute 将遮罩定位到容器底部
pointer-events: none 确保遮罩不会阻挡文字的选中和链接点击
配合 JavaScript 切换 expanded 类来实现展开/收起

1.3 案例：六边形切角效果

利用多个不同角度的线性渐变叠加，可以创造切角效果。CSS 的 background 属性支持多背景叠加，根据 MDN 使用多重背景文档：

可以为元素应用多个背景。这些背景相互叠加，第一个背景在最上面，最后一个背景在最下面。

.hexagon {
  width: 200px;
  height: 100px;
  background:
    /* 左上角切角 */ linear-gradient(120deg, transparent 30px, #9b59b6 0),
    /* 右上角切角 */ linear-gradient(-120deg, transparent 30px, #9b59b6 0), /* 左下角切角 */
      linear-gradient(60deg, transparent 30px, #9b59b6 0),
    /* 右下角切角 */ linear-gradient(-60deg, transparent 30px, #9b59b6 0);
  background-size: 50% 50%;
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
}

深入解析：为什么可以写 `0`？

在代码中 transparent 30px, #9b59b6 0 这样的写法——第二个颜色的位置是 0，这看起来不合逻辑，为什么有效？

颜色停靠点（Color Stop）规则

根据 MDN 文档：

Color-stops should be listed in ascending order. Subsequent color-stops of lower value will override the value of the previous color-stop creating a hard transition.

中文解释：颜色停靠点应按升序排列。如果后续停靠点的位置值小于前一个，浏览器会自动将其修正为前一个的值，从而创建硬边界过渡（无渐变效果的分界线）。

这意味着：

linear-gradient(red 50%, blue 50%) → 在 50% 处形成红蓝分界的硬边界
linear-gradient(red 30px, blue 0) → 0 被修正为 30px，等价于 red 30px, blue 30px

1.4 案例：重复渐变 —— 条纹图案

repeating-linear-gradient() 可以创建无限重复的图案。根据 MDN 文档：

The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, it defaults to 0.

中文解释：重复的渐变长度是第一个和最后一个颜色停靠点之间的距离。如果第一个颜色没有指定位置，则默认为 0。这意味着定义好一个"单元"渐变后，它会自动无限重复平铺整个容器。

警示条纹

黑黄相间的斜条纹，常用于表示警告或施工状态：

.warning-stripe {
  width: 400px;
  height: 60px;
  background: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #ffcc00 10px,
    #ffcc00 20px
  );
}

技术解析：

45deg 设置条纹为 45 度斜向
#000, #000 10px 黑色从 0 到 10px
#ffcc00 10px, #ffcc00 20px 黄色从 10px 到 20px
这个 20px 的单元会无限重复

笔记本横线纸效果

模拟笔记本的蓝色横线效果：

.notebook-paper {
  width: 300px;
  height: 200px;
  padding: 10px 20px;
  background: repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      #91d1ff 27px,
      #91d1ff 28px
    ), #fff;
  line-height: 28px; /* 与横线间距匹配 */
}

技术解析：

每 28px 循环一次（27px 透明 + 1px 蓝线）
line-height: 28px 让文字正好落在横线上
底层使用白色作为背景色

2. 径向渐变 `radial-gradient()`

径向渐变从一个中心点向外辐射，形成圆形或椭圆形的颜色过渡。根据 MDN 文档：

To create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.

中文解释：为了创建平滑的渐变，radial-gradient() 函数绘制一系列从中心向外辐射到结束形状的同心形状（可能延伸到结束形状之外）。结束形状可以是圆形或椭圆形。

2.1 语法详解

根据 MDN 文档，其语法如下：

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]?,
  <color-stop-list>
)

参数说明：

参数	说明	可选值
`<ending-shape>`	渐变的形状	`circle`（圆形）, `ellipse`（椭圆，默认）
`<size>`	渐变的尺寸	`closest-side`, `farthest-side`, `closest-corner`, `farthest-corner`（默认），或具体长度
`at <position>`	渐变圆心位置	`center`（默认）, `top left`, `50% 50%`, `at left` 等

代码示例

/* 从中心向外的圆形渐变 */
background: radial-gradient(circle, #fff, #000);

/* 指定圆心在左侧 */
background: radial-gradient(circle at left, transparent 10px, #ff6b6b 10px);

/* 椭圆渐变 */
background: radial-gradient(ellipse at top, #e66465, #9198e5);

2.2 案例：优惠券缺口效果

电商场景中常见的优惠券样式，两侧有半圆形缺口。这正是径向渐变的经典应用场景。

.coupon {
  width: 300px;
  height: 120px;
  background:
    /* 左侧半圆缺口 */ radial-gradient(
      circle at left,
      transparent 10px,
      #ff6b6b 10px
    ),
    /* 右侧半圆缺口 */ radial-gradient(circle at right, transparent 10px, #ff6b6b
          0);
  background-size: 51% 100%, 51% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}

技术解析：

radial-gradient(circle at left, ...) 创建一个圆心在左侧的径向渐变
transparent 10px, #ff6b6b 10px 表示 0-10px 是透明的（形成缺口），10px 之后是红色
使用两个背景分别处理左右两侧
background-size: 51% 让两个背景各占一半（51% 确保中间无缝隙）
右侧渐变中 #ff6b6b 0 同样利用了前面讲的简写技巧，0 会被修正为 10px

3. 角向渐变 `conic-gradient()`

角向渐变围绕中心点旋转，像饼图一样呈扇形分布颜色。这是 CSS 渐变中最具创意潜力的函数。根据 MDN 文档：

A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a length, the color-stops of a conic gradient are specified with an angle.

中文解释：角向渐变通过指定旋转角度、渐变中心和颜色停靠点列表来定义。与线性渐变和径向渐变使用长度来定位颜色停靠点不同，角向渐变使用角度来指定颜色位置。角度单位包括 deg（度）、grad（梯度）、rad（弧度）和 turn（圈）。

3.1 语法详解

根据 MDN 文档，其语法如下：

conic-gradient(
  [ from <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

参数说明：

参数	说明	示例
`from <angle>`	渐变的起始角度（默认从 12 点钟方向，即 `0deg`）	`from 45deg`, `from 0.25turn`
`at <position>`	渐变圆心位置	`at center`, `at 0% 100%`
`<angular-color-stop>`	颜色及其角度位置	`red 0%`, `blue 90deg`, `green 25%`

代码示例

/* 简单的角向渐变 */
background: conic-gradient(red, yellow, green, blue, red);

/* 饼图效果：使用百分比分配 */
background: conic-gradient(#e74c3c 0% 35%, #3498db 35% 60%, #2ecc71 60% 100%);

/* 指定起始角度和圆心 */
background: conic-gradient(from 45deg at 50% 50%, red, blue);

3.2 案例：饼图统计

无需 SVG 或 Canvas，纯 CSS 实现数据可视化饼图：

.pie-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    #e74c3c 0% 35%,
    /* 红色 35% */ #3498db 35% 60%,
    /* 蓝色 25% */ #2ecc71 60% 85%,
    /* 绿色 25% */ #f1c40f 85% 100% /* 黄色 15% */
  );
}

技术要点：

使用百分比精确控制每个扇区的占比
border-radius: 50% 将矩形裁剪为圆形

3.3 案例：加载动画

配合 mask 属性镂空中心，打造优雅的加载圈：

.loader {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(transparent 0%, #00d4ff 100%);
  /* 使用 mask 镂空中心 */
  mask: radial-gradient(transparent 55%, #000 56%);
  -webkit-mask: radial-gradient(transparent 55%, #000 56%);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

技术要点：

conic-gradient(transparent 0%, #00d4ff 100%) 创建从透明到蓝色的渐变
mask: radial-gradient(...) 将中心 55% 区域镂空
配合旋转动画形成加载效果

3.4 案例：彩色轮盘（色相环）

从红色开始，经过所有色相，再回到红色：

.color-wheel {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    #ff0000,
    #ff8000,
    #ffff00,
    #80ff00,
    #00ff00,
    #00ff80,
    #00ffff,
    #0080ff,
    #0000ff,
    #8000ff,
    #ff00ff,
    #ff0080,
    #ff0000
  );
}

3.5 案例：棋盘格

配合 background-size 将角向渐变变成可平铺的单元格：

.checkerboard {
  width: 200px;
  height: 150px;
  background: conic-gradient(
    #333 0% 25%,
    #fff 25% 50%,
    #333 50% 75%,
    #fff 75% 100%
  );
  background-size: 40px 40px;
}

技术解析：

conic-gradient 默认会填满整个元素
设置 background-size: 40px 40px 后，渐变被限制在 40×40 的区域内
默认 background-repeat: repeat 会让这个小图案自动平铺

3.6 案例：与 background-size 组合 —— 复杂图案平铺

将角向渐变与 background-size 结合，可以创造出丰富的平铺图案。

波点地砖

.tile {
  background: conic-gradient(
    #e74c3c 0% 25%,
    #fff 25% 50%,
    #e74c3c 50% 75%,
    #fff 75% 100%
  );
  background-size: 40px 40px;
}

交织图案

多层角向渐变叠加，创造更复杂的纹理：

.weave {
  background: conic-gradient(from 45deg, #3498db 0% 25%, transparent 25% 100%),
    conic-gradient(
      from 45deg at 50% 50%,
      transparent 0% 50%,
      #2ecc71 50% 75%,
      transparent 75% 100%
    ), #1a1a2e;
  background-size: 30px 30px;
}

技术解析：

from 45deg 设置渐变的起始角度
第一层蓝色渐变只占 25%（一个扇形）
第二层绿色渐变占 50%-75%（另一个扇形）
底层深色作为背景
三层叠加形成交织效果

三角旗帜

利用 at 参数改变渐变中心点位置：

.flags {
  background: conic-gradient(
      from -45deg at 0% 100%,
      #f1c40f 0% 25.3%,
      transparent 25.3% 100%
    ), conic-gradient(
      from 135deg at 100% 0%,
      #e74c3c 0% 25.3%,
      transparent 25.3% 100%
    ), #fff;
  background-size: 40px 40px;
}

技术解析：

at 0% 100% 将圆心移到左下角
at 100% 0% 将圆心移到右上角
from -45deg 和 from 135deg 控制三角形的朝向
两个三角形叠加在白色背景上，形成旗帜效果

4. 总结

核心属性速查表

属性	作用	常用值
`background-image`	设置背景图像/渐变	`linear-gradient()`, `radial-gradient()`, `conic-gradient()`
`background-size`	背景尺寸	`cover`, `contain`, `100px 100px`, `50% 50%`
`background-position`	背景位置	`center`, `top left`, `50% 50%`
`background-repeat`	是否平铺	`repeat`, `no-repeat`, `repeat-x`, `repeat-y`

渐变函数对比表

渐变类型	函数	适用场景
线性渐变	`linear-gradient()`	条纹、淡出效果、切角
径向渐变	`radial-gradient()`	圆形缺口、聚光灯效果
角向渐变	`conic-gradient()`	饼图、棋盘格、色轮
重复线性	`repeating-linear-gradient()`	无限条纹图案
重复径向	`repeating-radial-gradient()`	同心圆图案
重复角向	`repeating-conic-gradient()`	放射线图案

核心技巧回顾

透明渐变：使用 transparent 创建淡入淡出效果
多背景叠加：用逗号分隔多个渐变，配合 background-size 和 background-position
硬边界技巧：后面的 color-stop 位置写 0，会被自动修正为前一个的值，形成无过渡分界
图案平铺：设置 background-size 限制渐变区域，自动平铺形成图案
角向渐变定位：使用 from angle at x y 控制起始角度和圆心位置

掌握这些技巧，你就能用纯 CSS 创造出各种令人惊艳的视觉效果，减少对图片资源的依赖，提升页面性能！

📚 延伸阅读

MDN CSS Gradients - CSS 渐变完整指南

MDN background - background 简写属性详解

MDN Using multiple backgrounds - 多背景叠加技术

CSS-Tricks: A Complete Guide to CSS Gradients - 渐变实战指南

Background - CSS 最强属性之一(1)

1. 线性渐变 linear-gradient()

1.1 语法详解

多位置语法

1.2 案例：透明渐变色 —— 文字淡出效果

核心原理

实战代码

1.3 案例：六边形切角效果

深入解析：为什么可以写 0？

颜色停靠点（Color Stop）规则

1.4 案例：重复渐变 —— 条纹图案

警示条纹

笔记本横线纸效果

2. 径向渐变 radial-gradient()

2.1 语法详解

代码示例

2.2 案例：优惠券缺口效果

3. 角向渐变 conic-gradient()

3.1 语法详解

代码示例

3.2 案例：饼图统计

3.3 案例：加载动画

3.4 案例：彩色轮盘（色相环）

3.5 案例：棋盘格

3.6 案例：与 background-size 组合 —— 复杂图案平铺

波点地砖

交织图案

三角旗帜

4. 总结

核心属性速查表

渐变函数对比表

核心技巧回顾

1. 线性渐变 `linear-gradient()`

深入解析：为什么可以写 `0`？

2. 径向渐变 `radial-gradient()`

3. 角向渐变 `conic-gradient()`