持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情
CSS渐变
CSS渐变是在CSS3 Image Module中新增加的 类型.使用CSS渐变可以在两种 颜色间制造出平滑的渐变效果.用它代替图片，可以加快页面的载入时间、减小带宽占用。
同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。
CSS3中新增的渐变主要分以下两种：
- 线形渐变
- 径向渐变
- 重复渐变
线形渐变
线性渐变由一个轴(基准线)定义的，并且轴上每个点都具有独立的颜色。linear-gradient)函数构 建垂直于基准线的渐变效果，渐变的颜色取决于与之垂直相交的基准线上的色点。
基准线由包含渐变效果容器元素的中心点和一个角度来定义 的。基准线上的颜色值则由不同的点来定义，包括起始点、 终止点以及两者之间可选的中间点(中间点可以有多个)。 起始点是基准线和容器元素的顶点与基准线垂直线的相交点. 来定义。 终止点是基准线和容器元素最近顶点与基准线垂直线的相交 点来定义。
线形渐变语法 （linear-gradient（））
基本语法结构：
linear-gradient(<angle>| <side-or-corner>, <color-stop>, <color-stop> +)
上述语法的参数说明:
-
第一个参数用于定义线性渐变的方向，并且定义渐变颜色的终止位置。
angle:通过角度来定义渐变的方向。0度表示渐变方向从下向上，90度表示渐变从左向右。 其角度按照顺时针方向增加。
side- -or-corner:通过关键字定义渐变的方向。具有两个关键字，一个表示水平位置( left或 right)，一 个表示垂直位置( top或bottom)。关键字的先后顺序无影响，并且都是可选的。
-
第二个参数、第三个参数用于定义渐变颜色的起始点和终止点。
注意：
浏览器兼容问题解决办法：
如下代码展示了最基本的渐变效果：
.container div {
width: 300px;
height:200px;
display: inline-block;
}
.container div:nth-child(1){
/*
linear-gradient(angle,color-stop,color-stop,...)
angle - 通过角度方式定义线形渐变的基准线的方向，单位为deg
color-stop —— 表示线形渐变的颜色以及位置
*/
background: linear-gradient(0deg,yellow,purple);
/* 渐变颜色从下到上 */
}
效果图如下：
下列代码加注释展示了linear-gradient（）函数的几种使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线形渐变</title>
<style>
.container div {
width: 300px;
height:200px;
display: inline-block;
}
.container div:nth-child(1){
/*
linear-gradient(angle,color-stop,color-stop,...)
angle - 通过角度方式定义线形渐变的基准线的方向，单位为deg
color-stop —— 表示线形渐变的颜色以及位置
*/
background: linear-gradient(0deg,yellow,purple);
/* 渐变颜色从下到上 */
}
.container div:nth-child(2){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
side-or-corner - 通过关键字方式定义线形渐变的基准线的方向
一个关键字表示水平方向：left 和 right
一个关键字表示垂直方向：top 和 bottom
* 注意:
* 两个关键字与顺序无关
* 两个关键字都是可选的
color-stop —— 表示线形渐变的颜色以及位置
*/
background: -webkit-linear-gradient(left,yellow,purple);
/* 渐变颜色从左到右 */
}
.container div:nth-child(3){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
side-or-corner - 通过关键字方式定义线形渐变的基准线的方向
* 关键字 - 表示这个方向为起点
* to 关键字 - 表示这个方向为终点
*/
background: linear-gradient(to left,yellow,purple);
/* 渐变颜色从左到右 */
}
.container div:nth-child(4){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
side-or-corner - 通过关键字方式定义线形渐变的基准线的方向
*/
background: -webkit-linear-gradient(left top,yellow,purple);
/* 渐变颜色从左上到右下 */
}
.container div:nth-child(5){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
color-stop - 表示线形渐变的颜色以及位置
*/
background: -webkit-linear-gradient(90deg,yellow,purple,green);
}
.container div:nth-child(6){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
color-stop - 表示线形渐变的颜色以及位置
*如果同时设置颜色以及位置的话，中间使用空格间隔
*颜色的位置的值范围：— 0% ~ 100%
*/
background: -webkit-linear-gradient(90deg,yellow,purple 80%,green);
}
.container div:nth-child(7){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
color-stop - 表示线形渐变的颜色以及位置
*如果同时设置颜色以及位置的话，中间使用空格间隔
*颜色的位置的值范围：
* 百分比值：— 0% ~ 100%
* 长度值 - 数字值 + 长度单位（px,mm）
*/
background: -webkit-linear-gradient(90deg,yellow,purple 160px ,green);
}
.container div:nth-child(8){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
color-stop - 表示线形渐变的颜色以及位置
* 通过rgba（）函数方式添加颜色的透明度
*/
background: -webkit-linear-gradient(90deg,rgba(255,255,255,0),rgba(255,0,0,0.5),
rgba(255,255,0,1));
}
.container div:nth-child(9){
/*
linear-gradient(side-or-corner,color-stop,color-stop,...)
color-stop - 表示线形渐变的颜色以及位置
* 通过rgba（）函数方式添加颜色的透明度
*/
/* 设置边框颜色渐变 */
border: 5px solid;
border-image: -webkit-linear-gradient(#454534, rgb(255, 170, 255) , #c93b5c)1 10 1;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
