钟文志的部落格

Appearance

CSS3 中的渐变（Gradients）是用纯 CSS 创建平滑过渡的颜色变化效果的强大工具。它们使得网页开发者能够不依赖于图像来实现复杂的视觉效果。CSS3 支持两种主要的渐变类型：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。

1. 线性渐变（Linear Gradient） ​

线性渐变在一条直线上从一个颜色平滑过渡到另一个颜色。你可以控制渐变的方向、颜色停止点和颜色过渡。

基本语法：

css
background: linear-gradient(direction, color-stop1, color-stop2, ...);

示例：

css
/* 从顶部到底部的渐变 */
background: linear-gradient(to bottom, red, yellow);

/* 从左上角到右下角的渐变 */
background: linear-gradient(to bottom right, red, blue);

/* 带有多个颜色停止点的渐变 */
background: linear-gradient(to right, red, yellow 30%, green 60%, blue);

2. 径向渐变（Radial Gradient） ​

径向渐变从一个中心点向外扩展，创建一个圆形或椭圆形的渐变效果。你可以指定渐变的形状、大小和颜色停止点。

基本语法：

css
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

示例：

css
/* 默认是圆形渐变 */
background: radial-gradient(red, yellow, green);

/* 椭圆形渐变 */
background: radial-gradient(ellipse, red, yellow, green);

/* 指定渐变的中心位置 */
background: radial-gradient(circle at center, red, yellow, green);

/* 指定渐变的大小 */
background: radial-gradient(circle at center, red, yellow, green);

3. 颜色停止点（Color Stops） ​

颜色停止点指定了颜色在渐变中的特定位置。你可以使用百分比或绝对长度来定义这些点。

示例：

css
/* 在25%处变为黄色，在50%处变为绿色，在75%处变为蓝色 */
background: linear-gradient(to right, red 25%, yellow 50%, green 75%, blue);

4. 重复渐变（Repeating Gradients） ​

CSS3 还支持重复渐变，允许你创建重复的渐变图案。

线性重复渐变：

css
background: repeating-linear-gradient(to right, red, yellow 10%, red 20%);

径向重复渐变：

css
background: repeating-radial-gradient(circle at center, red, yellow 10%, red 20%);

实例 ​

下面是一个示例，展示了如何使用不同的渐变类型和属性：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 渐变示例</title>
<style>
    .linear-gradient-box {
        width: 300px;
        height: 150px;
        background: linear-gradient(to right, red, yellow, green, blue);
        border: 1px solid #000;
        margin-bottom: 20px;
    }
    .radial-gradient-box {
        width: 300px;
        height: 150px;
        background: radial-gradient(circle, red, yellow, green);
        border: 1px solid #000;
        margin-bottom: 20px;
    }
    .repeating-gradient-box {
        width: 300px;
        height: 150px;
        background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
        border: 1px solid #000;
        margin-bottom: 20px;
    }
</style>
</head>
<body>
    <div class="linear-gradient-box">线性渐变</div>
    <div class="radial-gradient-box">径向渐变</div>
    <div class="repeating-gradient-box">重复渐变</div>
</body>
</html>

在这个示例中，我们创建了三个不同的盒子，每个盒子展示了一种不同的渐变效果：线性渐变、径向渐变和重复渐变。这些功能强大的CSS3渐变特性允许开发者在网页设计中创造出丰富多彩的视觉效果。