CSS 渐变完全指南：从基础概念到实战案例（线性渐变/径向渐变/重复渐变）

一、什么是 CSS 渐变？

渐变是网页设计中常用的视觉效果，指两种或多种颜色之间的平滑过渡。CSS 提供了强大的渐变功能，无需依赖图片即可创建复杂的色彩过渡效果，主要分为线性渐变和径向渐变两大类。

二、线性渐变（Linear Gradient）

基础语法

css

复制代码

background-image: linear-gradient(
  [渐变方向], 
  颜色停止点1, 
  颜色停止点2, 
  ... 
  颜色停止点N
);

1. 渐变方向详解

默认方向：不指定方向时，默认从上到下（to bottom）

css

复制代码

.demo1 {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(red, blue); /* 红到蓝的垂直渐变 */
}

image

（此处为示意，实际需替换为图片链接）

指定方向关键词：可用to top（下到上）、to right（左到右）、to left bottom（右上到左下）等

css

复制代码

.demo2 {
  background-image: linear-gradient(to right, yellow, green); /* 水平黄到绿渐变 */
}

角度值设定：使用角度（如45deg）精确控制方向，0deg 为向上，顺时针旋转

css

复制代码

.demo3 {
  background-image: linear-gradient(45deg, purple, orange); /* 45度紫到橙渐变 */
}

颜色停止点控制

百分比定位：指定颜色过渡的具体位置

css

复制代码

.demo4 {
  background-image: linear-gradient(to bottom, 
    red 20%,        /* 红色从顶部开始，到20%高度结束 */
    yellow 50%,     /* 黄色从20%开始，到50%结束 */
    blue 100%       /* 蓝色从50%开始，到100%结束 */
  );
}

关键词定位：使用start、center、end替代百分比

css

复制代码

.demo5 {
  background-image: linear-gradient(to right, 
    red at 20%, 
    yellow at center, 
    blue at 80%
  );
}

三、径向渐变（Radial Gradient）

基础语法

css

复制代码

background-image: radial-gradient(
  [形状大小参数], 
  颜色停止点1, 
  颜色停止点2, 
  ...
);

1. 形状与尺寸参数

默认值：圆心在中心（center），形状为椭圆（ellipse），尺寸覆盖整个容器

css

复制代码

.demo6 {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(red, blue); /* 中心红向外渐变到蓝 */
}

指定圆心位置：使用at x y设定（x/y 可用像素、百分比或关键词）

css

复制代码

.demo7 {
  background-image: radial-gradient(at top left, red, blue); /* 左上角为圆心 */
}

形状控制：circle（圆形）需容器为正方形才显圆形，ellipse（椭圆）为默认值

css

复制代码

.demo8 {
  background-image: radial-gradient(circle, yellow, green); /* 圆形渐变 */
}

尺寸关键词：closest-corner（到最近角落）、farthest-side（到最远边）等

css

复制代码

.demo9 {
  background-image: radial-gradient(farthest-corner, purple, orange); /* 到最远角落的渐变 */
}

四、重复渐变（Repeating Gradients）

1. 重复线性渐变

css

复制代码

background-image: repeating-linear-gradient(
  方向, 
  颜色1, 
  颜色2 间隔距离, 
  颜色3 2倍间隔距离, 
  ...
);

示例：水平条纹背景

css

复制代码

.body-bg {
  background-image: repeating-linear-gradient(
    to right, 
    #f0f0f0 0,        /* 白色起始 */
    #f0f0f0 20px,     /* 20px宽白色 */
    #e0e0e0 20px,     /* 开始灰色 */
    #e0e0e0 40px      /* 40px宽灰色，重复 */
  );
}

2. 重复径向渐变

css

复制代码

background-image: repeating-radial-gradient(
  圆心参数, 
  颜色1, 
  颜色2 半径间隔, 
  ...
);

示例：同心圆图案

css

复制代码

.demo10 {
  background-image: repeating-radial-gradient(
    circle at center, 
    red 0, 
    red 10px, 
    blue 10px, 
    blue 20px
  );
}

五、实用技巧与注意事项

背景属性组合使用

css

复制代码

.element {
  background: linear-gradient(45deg, #ff0000, #00ff00) padding-box; /* 渐变仅作用于内容区 */
  background-size: 100% 200%; /* 拉伸渐变背景 */
  background-clip: text;      /* 文字填充渐变（需配合color: transparent） */
}

兼容性处理

旧版浏览器（如 IE10+）需添加前缀：

css

复制代码

background-image: -webkit-linear-gradient(red, blue); /* Webkit内核前缀 */

渐变属于background-image属性，需同时设置background-color作为不支持时的 fallback：

css

复制代码

background-color: #ff0000; /* 红色背景 */
background-image: linear-gradient(red, blue);

在线生成工具推荐

CSS Gradient：可视化生成工具，支持导出代码
Color Hunt：获取渐变配色方案灵感

六、综合案例：渐变按钮

css

复制代码

.gradient-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  color: white;
  background-image: linear-gradient(135deg, #ff6b6b, #4ecdc4); /* 135度粉到青渐变 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.gradient-btn:hover {
  background-image: linear-gradient(135deg, #4ecdc4, #ff6b6b); /* 反向渐变 */
}

总结

CSS 渐变是提升网页视觉效果的重要工具，掌握线性渐变和径向渐变的核心语法，配合颜色停止点和方向控制，就能创建出丰富的过渡效果。初学者应从基础示例开始练习，逐步尝试复杂的渐变组合，结合浏览器开发者工具调试，最终实现灵活运用。