详解CSS渐变

2021-04-01 17:27:55
1188次极悦

CSS颜色渐变能够使我们开发的页面的背景颜色在两个或多个颜色之间平滑过渡。CSS流行之前，必须使用图像实现这些效果。然而, 通过使用CSS渐变可以减少下载时间和带宽的使用.。此外，缩放的元素在缩放时看起来更好，因为渐变是由浏览器生成的。本文我们就来细聊一些CSS渐变的相关知识。

CSS渐变分为线性渐变和径向渐变2种，下面我们来一一介绍。

1.CSS3 线性渐变

要创建线性渐变，必须定义至少两个颜色停止。颜色停止是你想要渲染平滑过渡之间的颜色。你还可以设置一个起始点和一个方向（或角度）和渐变效果。

语法：

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

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>
  <div id="grad1"></div>
</body>
</html>

例如：

(1)线性渐变 - 上到下

显示从顶部开始的线性渐变。它从开始的红色，过渡到黄色:

<style>
    #grad1 {
        height: 200px;
        background: blue; /* 对于那些不支持渐变的浏览器 */
        background: -webkit-linear-gradient(blue, yellow); /* Safari 5.1 到 6.0 */
        background: -o-linear-gradient(blue, yellow); /* Opera 11.1 到 12.0 */
        background: -moz-linear-gradient(blue, yellow); /* Firefox 3.6 到 15 */
        background: linear-gradient(blue, yellow); /* 标准语法 (必须是最后一个) */
    }
</style>

(2)线性渐变 - 左到右

例如：

显示从左开始的线性渐变。它从开始的红色，过渡到黄色

<style>
    #grad1 {
        height: 200px;
        background: blue; /* 对于那些不支持渐变的浏览器 */
        background: -webkit-linear-gradient(left, blue , yellow); /* Safari 5.1 到 6.0 */
        background: -o-linear-gradient(right, blue, yellow); /* Opera 11.1 到 12.0 */
        background: -moz-linear-gradient(right, blue, yellow); /* Firefox 3.6 到 15 */
        background: linear-gradient(to right, blue , yellow); /* 标准语法 (必须是最后一个) */
    }
</style>

(3)线性渐变 - 对角线

可以通过指定水平和垂直起始位置来实现对角线渐变。

下面的示例显示从左上角开始的线性渐变（到右下角）。它开始红色，过渡到黄色:

<style>
    #grad1 {
        height: 200px;
        background: blue; /*对于那些不支持渐变的浏览器 */
        background: -webkit-linear-gradient(left top, blue, yellow); /* Safari 5.1 到 6.0 */
        background: -o-linear-gradient(bottom right, blue, yellow); /* Opera 11.1 到 12.0 */
        background: -moz-linear-gradient(bottom right, blue, yellow); /* Firefox 3.6 到 15 */
        background: linear-gradient(to bottom right, blue, yellow); /* 标准语法(必须是最后一个) */
    }
</style>

2.CSS3 径向渐变 (由中心定义)

径向渐变是由其中心定义的。

要创建径向渐变，还必须定义至少两个停止颜色。

语法

background: radial-gradient(shape size at position, start-color, ..., last-color);径向渐变-均匀的间隔停止颜色 (默认)

下面的示例显示一个径向渐变，其颜色间隔均匀:

#grad {
  background: blue; /*  browsers that do not support gradients */
  background: -webkit-radial-gradient(blue, yellow, green); /* Safari 5.1 到 6.0 */
  background: -o-radial-gradient(blue, yellow, green); /*  Opera 11.6 到 12.0 */
  background: -moz-radial-gradient(blue, yellow, green); /*  Firefox 3.6 到 15 */
  background: radial-gradient(blue, yellow, green); /* Standard syntax */
}

径向渐变-不同间隔的停止颜色

下面的例子显示了一个具有不同间距的颜色渐变的径向渐变:

#grad {
  background: blue; /*不支持渐变的浏览器 */
  background: -webkit-radial-gradient(blue 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(blue 5%, yellow 15%, green 60%); /*  Opera 11.6-12.0 */
  background: -moz-radial-gradient(blue 5%, yellow 15%, green 60%); /*  Firefox 3.6-15 */
  background: radial-gradient(blue 5%, yellow 15%, green 60%); /* Standard syntax */
}

总的来说，CSS渐变的两种方法各有千秋，但都是为了前端开发页面的颜色实现渐变的效果，从而提升页面的丰富性。在本站的CSS教程中对CSS控制页面的其他属性的方式也都有提及，想学习的小伙伴可以轻松学会，设计出属于自己的优秀的页面。

上一篇：浅谈CSS隐藏元素的5种方法下一篇：CSS边框属性详解