CSS 渐变

学习 linear-gradient/radial-gradient · 难度：进阶 · +15XP

CSS 渐变详解

CSS 渐变让你能够创建两个或多个颜色之间的平滑过渡效果。渐变可以替代图片作为背景，减少 HTTP 请求，提升页面性能。CSS 支持三种类型的渐变：线性渐变、径向渐变和锥形渐变。

线性渐变 linear-gradient

线性渐变沿一条直线方向进行颜色过渡。这是最常用的渐变类型，可以指定方向或角度。

/* 默认从上到下 */
div {
  background: linear-gradient(red, blue);
}
/* 指定方向 */
div.top-to-bottom {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}
div.left-to-right {
  background: linear-gradient(to right, #ff0000, #0000ff);
}
div.diagonal {
  background: linear-gradient(to bottom right, red, purple);
}
/* 使用角度 */
div.angled {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
/* 多个颜色 + 位置控制 */
div.multi-stop {
  background: linear-gradient(to right, #ff0000 0%, #ffff00 50%, #00ff00 100%);
}

径向渐变 radial-gradient

径向渐变从中心点向外辐射进行颜色过渡，默认形状为椭圆形。

/* 基本径向渐变 */
div {
  background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}
/* 指定中心位置 */
div.positioned {
  background: radial-gradient(circle at 50% 50%, yellow, red);
}
div.top-left {
  background: radial-gradient(circle at top left, #fff, #333);
}
/* 多个色标 */
div.multi {
  background: radial-gradient(circle, red 0%, yellow 30%, green 80%);
}
/* 指定大小 */
div.sized {
  background: radial-gradient(closest-side circle at 50% 50%, red, blue);
}

锥形渐变 conic-gradient

锥形渐变围绕中心点旋转进行颜色过渡，适合创建饼图、色轮等效果。

/* 基本锥形渐变 */
div.pie {
  background: conic-gradient(red, yellow, green, blue, red);
}
/* 指定起始角度和中心位置 */
div.conic {
  background: conic-gradient(from 90deg at 50% 50%, red, blue, red);
}
/* 硬色标 - 创建色块 */
div.stripes {
  background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg);
}

重复渐变 repeating-linear-gradient / repeating-radial-gradient

div.stripes {
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
div.circles {
  background: repeating-radial-gradient(circle, #fff 0px, #fff 5px, #333 5px, #333 10px);
}

渐变类型对比表

渐变类型	函数	方向	典型用途
线性渐变	linear-gradient()	沿直线方向	背景、渐变线、进度条
径向渐变	radial-gradient()	从中心向外	光晕、聚光灯效果
锥形渐变	conic-gradient()	绕中心旋转	色轮、饼图、雷达图
重复线性	repeating-linear-gradient()	沿直线重复	条纹背景、斑马线
重复径向	repeating-radial-gradient()	径向重复	同心圆图案

???? 练习

1. 创建一个从左到右的线性渐变背景，使用三种颜色过渡
2. 制作一个带 45 度条纹渐变背景的横幅
3. 用径向渐变实现一个聚光灯效果（中心亮、四周暗）
4. 用锥形渐变画一个四色饼图
5. 使用 repeating-linear-gradient 制作笔记本横线效果