3_CSS3 渐变 --[CSS3 进阶之路]

CSS3 引入了渐变(gradients),它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3 支持两种类型的渐变:

  1. 线性渐变(Linear Gradients):颜色沿着一条线性路径变化,可以是水平、垂直或者对角线方向。
  2. 径向渐变(Radial Gradients):颜色从一个起点开始向外扩散,形成圆形或者椭圆形的渐变效果。

线性渐变

线性渐变 - 从上到下

这里有一个简单的 CSS3 线性渐变的例子,它从上到下应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景,这个背景的颜色将从蓝色平滑地过渡到绿色。

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, blue, green);
}

在这个例子中:

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: linear-gradient(to bottom, blue, green); 创建了一个从上(蓝色)到下(绿色)的线性渐变背景。

如果你想要在网页中看到效果,你需要把这个 CSS 样式应用到你的 HTML 文档中,并确保 .gradient-box 类被正确应用到了你想要展示渐变效果的元素上。此外,如果你希望在实际项目中使用,可以考虑添加浏览器前缀以确保更好的兼容性,尽管最新的浏览器通常不需要这些前缀。

这是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: -webkit-linear-gradient(top, blue, green); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(top, blue, green); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(top, blue, green); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom, blue, green); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码包含了旧版浏览器的支持,不过对于现代浏览器来说,只需要最后一个 linear-gradient 即可。

线性渐变 - 从左到右

下面是一个简单的 CSS3 线性渐变的例子,它从左到右应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景,这个背景的颜色将从红色平滑地过渡到紫色。

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, red, purple);
}

在这个例子中:

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: linear-gradient(to right, red, purple); 创建了一个从左(红色)到右(紫色)的线性渐变背景。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: -webkit-linear-gradient(left, red, purple); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left, red, purple); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left, red, purple); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red, purple); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码会创建一个全宽的盒子,高度为200像素,并且有从红色逐渐变为紫色的水平渐变背景。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到从左到右的线性渐变效果。

线性渐变 - 对角

当然,下面是一个简单的 CSS3 线性渐变的例子,它从一个角到对角应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景,这个背景的颜色将从左上角(蓝色)平滑地过渡到右下角(橙色)。

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom right, blue, orange);
}

在这个例子中:

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: linear-gradient(to bottom right, blue, orange); 创建了一个从左上角(蓝色)到右下角(橙色)的对角线性渐变背景。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: -webkit-linear-gradient(left top, blue, orange); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left top, blue, orange); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left top, blue, orange); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, blue, orange); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码会创建一个全宽的盒子,高度为200像素,并且有从蓝色逐渐变为橙色的对角渐变背景。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到从左上角到右下角的线性渐变效果。

此外,如果你想让渐变的方向是从右上角到左下角,可以使用 to bottom left 或者 left bottom(旧版语法)作为方向参数。

使用角度

当你想要对线性渐变使用特定的角度时,你可以直接在 linear-gradient 函数中指定角度值。角度是从元素的中心开始测量的,并且0度指向垂直上侧,然后顺时针方向增加度数。

下面是一个 CSS3 线性渐变的例子,它使用了一个特定的角度来应用颜色的过渡。我们将创建一个背景,这个背景的颜色将从黄色平滑地过渡到紫色,渐变的角度是45度。

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, yellow, purple);
}

在这个例子中:

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: linear-gradient(45deg, yellow, purple); 创建了一个以45度角从黄色过渡到紫色的线性渐变背景。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: -webkit-linear-gradient(45deg, yellow, purple); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, yellow, purple); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, yellow, purple); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, yellow, purple); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码会创建一个全宽的盒子,高度为200像素,并且有从黄色逐渐变为紫色的45度角线性渐变背景。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到按照45度角变化的线性渐变效果。

请注意,角度可以是任何正值或负值,正角度表示顺时针方向,而负角度表示逆时针方向。例如 -45deg 将创建一个与 45deg 相反方向的渐变。

使用多个颜色节点

当你想要创建更复杂的线性渐变效果时,可以使用多个颜色节点(color stops)。每个颜色节点定义了在渐变路径上特定位置的颜色。你可以通过指定不同的颜色和它们的位置来控制渐变的外观。

下面是一个 CSS3 线性渐变的例子,它使用了多个颜色节点来创建一个从左到右的渐变,包含了红色、黄色、绿色、青色、蓝色和洋红色,并且每个颜色都有特定的位置。

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, 
    red 0%, /* 起始颜色 */
    yellow 25%, /* 第二个颜色,位于25%的位置 */
    green 50%, /* 第三个颜色,位于50%的位置 */
    cyan 75%, /* 第四个颜色,位于75%的位置 */
    blue 100% /* 结束颜色 */
  );
}

在这个例子中:

  • .gradient-box 是应用了多色线性渐变背景的一个 div 元素。
  • width: 100%;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: linear-gradient(to right, ...); 创建了一个从左到右的线性渐变背景,其中包含6种颜色,每种颜色都在特定的百分比位置开始。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: -webkit-linear-gradient(left, 
    red 0%, yellow 25%, green 50%, cyan 75%, blue 100%
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left, 
    red 0%, yellow 25%, green 50%, cyan 75%, blue 100%
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left, 
    red 0%, yellow 25%, green 50%, cyan 75%, blue 100%
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, 
    red 0%, yellow 25%, green 50%, cyan 75%, blue 100%
  ); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码会创建一个全宽的盒子,高度为200像素,并且有从红色逐渐过渡到其他颜色的水平线性渐变背景。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到从左到右的六色线性渐变效果。

此外,你可以自由地改变颜色的位置百分比或添加更多的颜色节点以达到你想要的效果。如果省略了颜色停止点的位置,则浏览器会平均分配这些颜色之间的空间。

使用透明度

在 CSS3 线性渐变中使用透明度可以通过设置颜色的 alpha 通道来实现,这允许你创建从完全不透明到半透明甚至完全透明的渐变效果。可以使用 rgba() 或者 hsla() 函数来指定带有透明度的颜色。

下面是一个简单的例子,展示了如何创建一个从左到右的线性渐变,该渐变从蓝色(完全不透明)平滑过渡到完全透明:

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, 
    rgba(0, 0, 255, 1), /* 蓝色,完全不透明 */
    rgba(0, 0, 255, 0)  /* 蓝色,完全透明 */
  );
}

在这个例子中:

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: linear-gradient(to right, ...); 创建了一个从左到右的线性渐变背景,其中起始颜色是蓝色并且完全不透明,而结束颜色是蓝色但完全透明。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: -webkit-linear-gradient(left, 
    rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left, 
    rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left, 
    rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, 
    rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)
  ); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码会创建一个全宽的盒子,高度为200像素,并且有从蓝色逐渐变为透明的水平线性渐变背景。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到从左到右的蓝色至透明的线性渐变效果。

此外,你还可以混合不同透明度的颜色节点,以创造出更加复杂和丰富的视觉效果。例如,你可以创建一个三色渐变,其中中间颜色部分透明:

css 复制代码
background: linear-gradient(to right, 
  rgba(255, 0, 0, 1), /* 红色,完全不透明 */
  rgba(0, 255, 0, 0.5), /* 绿色,半透明 */
  rgba(0, 0, 255, 1) /* 蓝色,完全不透明 */
);

这样,你就可以创建出更有趣的渐变效果,适用于不同的设计需求。

重复的线性渐变

CSS3 提供了 repeating-linear-gradient 函数,它允许你创建一个重复的线性渐变背景。这意味着你可以定义一个短的渐变序列,然后它会沿着指定的方向重复。

下面是一个简单的例子,展示了如何创建一个从左到右的重复线性渐变,该渐变从红色平滑过渡到蓝色再回到红色,并且这个模式会不断重复:

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 100%;
  height: 200px;
  background: repeating-linear-gradient(
    to right, 
    red, /* 起始颜色 */
    red 10px, /* 红色持续10px */
    blue 20px, /* 蓝色从10px开始到20px结束 */
    blue 30px /* 蓝色持续到30px */
  );
}

在这个例子中:

  • .gradient-box 是应用了重复线性渐变背景的一个 div 元素。
  • width: 100%;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: repeating-linear-gradient(...); 创建了一个从左到右的重复线性渐变背景,其中每一段渐变从红色过渡到蓝色,然后再回到红色,每个完整的渐变周期为30px(从红色到蓝色再到红色)。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: -webkit-repeating-linear-gradient(left, 
    red, red 10px, blue 20px, blue 30px
  ); /* Safari 5.1 - 6.0 */
  background: -o-repeating-linear-gradient(left, 
    red, red 10px, blue 20px, blue 30px
  ); /* Opera 11.1 - 12.0 */
  background: -moz-repeating-linear-gradient(left, 
    red, red 10px, blue 20px, blue 30px
  ); /* Firefox 3.6 - 15 */
  background: repeating-linear-gradient(to right, 
    red, red 10px, blue 20px, blue 30px
  ); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码会创建一个全宽的盒子,高度为200像素,并且有从红色逐渐变为蓝色再变回红色的水平重复线性渐变背景。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到从左到右的红蓝相间的重复渐变效果。

你可以自由地改变颜色、位置和渐变的长度以达到你想要的效果。例如,如果你希望渐变更细腻或更粗犷,可以调整颜色停止点之间的距离。

CSS3 径向渐变

径向渐变(Radial Gradients)在 CSS3 中用于创建从一个中心点向外扩散的渐变效果。你可以通过 radial-gradient 函数来定义这种类型的渐变。下面我将给出两个不同的径向渐变示例,以展示其多样性和灵活性。

示例 1: 简单的圆形径向渐变

这个例子会创建一个简单的圆形径向渐变,颜色从中心的白色逐渐变为边缘的蓝色。我们使用了默认的圆形形状和大小,并且没有指定位置,默认是从中心开始。

HTML:

html 复制代码
<div class="gradient-box simple-radial"></div>

CSS:

css 复制代码
.simple-radial {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, white, blue);
}

在这个例子中:

  • .simple-radial 是应用了径向渐变背景的一个 div 元素。
  • width: 200px;height: 200px; 定义了该 div 的尺寸。
  • background: radial-gradient(circle, white, blue); 创建了一个从中心的白色到边缘的蓝色的圆形径向渐变。

示例 2: 椭圆径向渐变与自定义位置

这个例子展示了如何创建一个椭圆形的径向渐变,并且可以指定渐变的起点位置。我们将创建一个从左上角靠近中心的位置开始,颜色从浅黄色过渡到深橙色的渐变。

HTML:

html 复制代码
<div class="gradient-box complex-radial"></div>

CSS:

css 复制代码
.complex-radial {
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800);
}

在这个例子中:

  • .complex-radial 是应用了更复杂的径向渐变背景的一个 div 元素。
  • width: 300px;height: 200px; 定义了该 div 的尺寸,创建了一个非正方形的区域,因此默认情况下会产生椭圆形的渐变。
  • background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); 创建了一个椭圆形的径向渐变,起始点位于距离左侧和顶部各20%的位置,颜色从浅黄色 (#ffeb3b) 渐变到深橙色 (#ff9800)。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的 HTML 文件,包含了上面两个示例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  margin: 20px;
  display: inline-block;
}

.simple-radial {
  width: 200px;
  height: 200px;
  background: -webkit-radial-gradient(circle, white, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, white, blue); /* Opera 11.1 - 12.0 */
  background: -moz-radial-gradient(circle, white, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, white, blue); /* 标准语法 */
}

.complex-radial {
  width: 300px;
  height: 200px;
  background: -webkit-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Opera 11.1 - 12.0 */
  background: -moz-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Firefox 3.6 - 15 */
  background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box simple-radial"></div>
<div class="gradient-box complex-radial"></div>

</body>
</html>

这段代码会创建两个相邻的盒子,每个都有不同的径向渐变效果。第一个是简单的圆形渐变,第二个是更复杂的椭圆形渐变,并且具有自定义的起点位置。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到两种不同风格的径向渐变效果。

重复的径向渐变

CSS3 也支持重复的径向渐变,这通过 repeating-radial-gradient 函数来实现。这个函数允许你定义一个短的径向渐变序列,然后它会从中心向外重复该序列。

下面是一个简单的例子,展示了如何创建一个重复的径向渐变。我们将创建一个从中心开始的渐变,颜色从白色过渡到灰色再回到白色,并且这个模式会不断重复,形成一种类似圆环的效果。

HTML:

html 复制代码
<div class="gradient-box"></div>

CSS:

css 复制代码
.gradient-box {
  width: 200px;
  height: 200px;
  background: repeating-radial-gradient(
    circle, 
    white, /* 起始颜色 */
    white 10px, /* 白色持续10px */
    grey 10px, /* 灰色从10px开始 */
    grey 20px /* 灰色持续到20px */
  );
}

在这个例子中:

  • .gradient-box 是应用了重复径向渐变背景的一个 div 元素。
  • width: 200px;height: 200px; 定义了该 div 的尺寸,你可以根据需要调整这些值。
  • background: repeating-radial-gradient(...); 创建了一个圆形的重复径向渐变背景,其中每一段渐变从白色过渡到灰色,然后再回到白色,每个完整的渐变周期为20px(从白色到灰色再到白色)。

为了确保在各种浏览器上的兼容性,你也可以添加带有前缀的版本,尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例,可以直接复制粘贴到你的 HTML 文件中查看效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
  width: 200px;
  height: 200px;
  background: -webkit-repeating-radial-gradient(circle, 
    white, white 10px, grey 10px, grey 20px
  ); /* Safari 5.1 - 6.0 */
  background: -o-repeating-radial-gradient(circle, 
    white, white 10px, grey 10px, grey 20px
  ); /* Opera 11.1 - 12.0 */
  background: -moz-repeating-radial-gradient(circle, 
    white, white 10px, grey 10px, grey 20px
  ); /* Firefox 3.6 - 15 */
  background: repeating-radial-gradient(circle, 
    white, white 10px, grey 10px, grey 20px
  ); /* 标准语法 */
}
</style>
</head>
<body>

<div class="gradient-box"></div>

</body>
</html>

这段代码会创建一个200x200像素的盒子,并且有从白色逐渐变为灰色再变回白色的圆形重复径向渐变背景。如果你把这段代码放入你的HTML文件并打开它,你应该能够看到一个类似同心圆环的重复渐变效果。

你可以自由地改变颜色、位置和渐变的长度以达到你想要的效果。例如,如果你希望渐变更细腻或更粗犷,可以调整颜色停止点之间的距离。此外,你还可以使用不同的形状(如 ellipse)和大小(如 closest-sidefarthest-corner),以及自定义起点位置来创造更加独特的视觉效果。

相关推荐
光影少年16 分钟前
前端进程和线程及介绍
前端·javascript
Franciz小测测20 分钟前
VUE3 + Ant Design Vue4 开发笔记
前端·vue.js·vue
Swing_wingS1 小时前
SpringMvc解决跨域问题的源码汇总。
前端
乌龟的黑头-阿尔及利亚1 小时前
使用 Vite 创建 Vue 3 项目:从零开始的详细指南
前端·javascript·vue.js
三天不学习1 小时前
what?ngify 比 axios 更好用,更强大?
前端·axios·请求响应·ngify
2403_875180951 小时前
一键掌握多平台短视频矩阵营销/源码部署
java·前端·数据结构·线性代数·矩阵·php
Best_卡卡1 小时前
前端性能-HTTP缓存
前端·http·缓存
GIS好难学2 小时前
《Openlayers零基础教程》第六课:地图控件
前端·javascript·零基础·openlayers
VX_CXsjNo14 小时前
免费送源码:Java+ssm+Android 基于Android系统的外卖APP的设计与实现 计算机毕业设计原创定制
android·java·css·spring boot·mysql·小程序·idea