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

原创

于 2025-01-13 19:47:21 发布 · 1.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #css #CSS3 渐变

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

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

线性渐变

线性渐变 - 从上到下

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

HTML:

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

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 文件中查看效果：

<!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:

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

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 文件中查看效果：

<!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>