专注Java教育14年
全国咨询/投诉热线：444-1124-454
更新时间：2021-04-01 17:27:55 来源：星辉 浏览1035次
CSS颜色渐变能够使我们开发的页面的背景颜色在两个或多个颜色之间平滑过渡。CSS流行之前，必须使用图像实现这些效果。然而, 通过使用CSS渐变可以减少下载时间和带宽的使用.。此外，缩放的元素在缩放时看起来更好，因为渐变是由浏览器生成的。本文我们就来细聊一些CSS渐变的相关知识。
CSS渐变分为线性渐变和径向渐变2种，下面我们来一一介绍。
要创建线性渐变，必须定义至少两个颜色停止。颜色停止是你想要渲染平滑过渡之间的颜色。你还可以设置一个起始点和一个方向（或角度）和渐变效果。
语法：
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>
例如：
显示从顶部开始的线性渐变。它从开始的红色，过渡到黄色:
<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>
例如：
显示从左开始的线性渐变。它从开始的红色，过渡到黄色
<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>
可以通过指定水平和垂直起始位置来实现对角线渐变。
下面的示例显示从左上角开始的线性渐变（到右下角）。它开始红色，过渡到黄色:
<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>
径向渐变是由其中心定义的。
要创建径向渐变，还必须定义至少两个停止颜色。
语法
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控制页面的其他属性的方式也都有提及，想学习的小伙伴可以轻松学会，设计出属于自己的优秀的页面。
Java实验班
0基础 0学费 15天面授
Java就业班
有基础 直达就业
Java夜校直播班
业余时间 高薪转行
Java在职加薪班
工作1~3年，加薪神器
Java架构师班
工作3~5年，晋升架构
提交申请后，顾问老师会电话与您沟通安排学习
官方微信
官方抖音
