当前位置：首页 > web >正文

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

web 2025/7/18 9:54:56

一、什么是 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度紫到橙渐变 */
}

2. 颜色停止点控制
百分比定位：指定颜色过渡的具体位置
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);
}

五、实用技巧与注意事项

1. 背景属性组合使用
css

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

2. 兼容性处理
旧版浏览器（如 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);

3. 在线生成工具推荐

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); /* 反向渐变 */
}