正在加载...

CSS 渐变

纯色和照片能覆盖许多背景。有时你想要颜色之间的柔和过渡——安静的横幅、带光感的卡片、不用巨大图片文件的天空。那种过渡就是渐变，由 CSS 画成一种特殊的 background-image。

什么是 CSS 渐变？

渐变是浏览器生成的图像——不是你下载的 JPG。用 linear-gradient()、radial-gradient() 等函数描述它，再放进 background-image（或 background 简写）。结果像照片背景一样画在内容后面。

种类一览

先从这两种开始。锥形渐变可以以后再学。

📊 日常 CSS 渐变种类

种类 函数 日常用途
线性 linear-gradient(…) 横幅、按钮、区块冲洗：左→右或上→下
径向 radial-gradient(…) 柔和聚光卡片、从中心圆形淡出
方向词 to right、to bottom 不用角度也能读懂的线性方向
角度 45deg、90deg 词语不够时的精确倾斜
色标 teal 0%、navy 100% 每种颜色在过渡中的位置

线性：两种颜色，从左到右

最简单的线性渐变需要一个方向和至少两种颜色。CSS 在中间混合。

简单的左→右线性渐变

css
CSS Code 
.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}

怎么读这个函数

to right 是方向。#0f766e 开始；#0f172a 结束。浏览器填满中间。

角度与更多色标

用角度做对角冲洗，加中间色标让过渡更丰富。

带三个色标的倾斜线性

css
CSS Code 
.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}

色标习惯

色标就是「这种颜色在这里」。百分比好读。也可以省略位置，让浏览器均匀分配。

径向：从中心淡出

radial-gradient() 从中心向外扩散——适合柔和卡片与焦点光晕。

柔和径向卡片

css
CSS Code 
.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}

圆形提示

circle at center 保持圆形并居中。之后可用 at top 或 at 20% 30% 把聚光移到别处。

渐变活在 background-image 上

不要把渐变函数放进 color——那是给文字上色。渐变是背景图；文字对比度仍然重要。

带备用色的简写

css
CSS Code 
.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}

自己动手

  1. .banner 用 linear-gradient(to right, #0f766e, #0f172a) 和浅色文字。
  2. 方向改成 to bottom——混合轴会翻转。
  3. .hero 用 135deg 和三个色标（青绿 → 中间 → 深蓝）。
  4. .card 用 radial-gradient(circle at center, #ccfbf1, #0f766e)。
  5. 可选：在 background 简写里，渐变前加一个纯色备用色。

常见错误

  • 写 color: linear-gradient(…)——渐变不是文字颜色
  • 只有一个色标——混合至少需要两种颜色
  • 忘记这是 background-image（对比度与层叠仍适用）
  • 每个区块都彩虹爆炸——柔和的两到三个色标更专业
  • 以为渐变能取代有意义的照片（产品图仍需真实图片）

小结

  • 渐变是浏览器生成的背景图
  • linear-gradient() 沿直线混合；radial-gradient() 从中心
  • 方向词、角度与色标控制外观
  • 用 background-image 或 background 简写接入
  • 保持上方文字对比度足够
  • 先练一个线性横幅和一个径向卡片，再堆复杂技巧

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程