网站
引入
CSS 渐变用于在元素背景中做颜色过渡。
它可以不用图片就做出按钮、卡片、横幅、背景层等视觉效果。
正文
定义
定义
CSS 渐变是一种由浏览器生成的背景图像，可以让颜色从一种逐渐过渡到另一种。
渐变本质上常作为 background 或 background-image 的值使用。
语法
线性渐变：
.box {
background: linear-gradient(方向, 颜色1, 颜色2);
}径向渐变：
.box {
background: radial-gradient(形状, 颜色1, 颜色2);
}线性渐变 linear-gradient()
linear-gradient() 表示沿着一条直线进行颜色过渡。
.banner {
background: linear-gradient(to right, #2563eb, #9333ea);
}这个例子表示从左到右，由蓝色过渡到紫色。
常见方向：
| 写法 | 作用 |
|---|---|
to right | 从左到右 |
to left | 从右到左 |
to bottom | 从上到下 |
to top | 从下到上 |
135deg | 按角度渐变 |
多个颜色
渐变可以有多个颜色。
.box {
background: linear-gradient(135deg, #2563eb, #9333ea, #ec4899);
}颜色会按照顺序过渡。
也可以给颜色设置位置。
.box {
background: linear-gradient(to right, #2563eb 0%, #9333ea 60%, #ec4899 100%);
}径向渐变 radial-gradient()
radial-gradient() 表示从中心向外扩散的颜色过渡。
.circle {
background: radial-gradient(circle, #ffffff, #2563eb);
}这个例子会生成从白色到蓝色的圆形扩散渐变。
例子
渐变按钮
<button class="btn">开始学习</button>.btn {
padding: 10px 18px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #9333ea);
color: white;
}渐变按钮比单色按钮更有视觉重点。
渐变横幅
<section class="hero">
<h2>前端学习</h2>
<p>HTML、CSS、JavaScript</p>
</section>.hero {
padding: 48px 24px;
border-radius: 16px;
background: linear-gradient(135deg, #0f172a, #2563eb);
color: white;
}渐变横幅常用于首页头图、介绍区、卡片背景。
特点
- 渐变通常写在
background或background-image中 linear-gradient()是线性渐变radial-gradient()是径向渐变- 渐变可以有两个或多个颜色
- 渐变不是真实图片，是浏览器生成的背景效果
- 颜色对比要注意，不要影响文字可读性
理解
渐变可以理解为“自动生成的背景图片”。
它不改变 HTML 内容，只是让元素背景从一种颜色慢慢变成另一种颜色。
平时写页面时，渐变适合用在按钮、卡片、横幅、背景装饰上，但正文区域不要太花，避免影响阅读。