[CSS]-8-渐变效果
引言
这篇文章介绍css3提供的新特性，渐变效果。
文章目录
0×1.线性渐变
渐变效果是background-image属性的一个值，语法格式如下：
background-image:linear-gradient(方位, 起始色, 末尾色);
其中，方位为可选参数，起始色与末尾色为必选参数，如果不指定方位参数，默认的渐变由上往下。
方位支持的值： to top、to top right、to right、to bottom、to bottom left、to left、to top left等，除此之外，方为还支持角度单位deg。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>渐变效果实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--未配置方位参数，默认由上往下-->
background-image: linear-gradient(green,red)
}
#d2{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--配置了方为参数，从左上到右下-->
background-image: linear-gradient(to bottom right,green,red)
}
#d3{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--使用角度方位，45°渐变，0°=to top，45°=to top right，可以是负值，负值渐变方向与正值相对图形的中垂线左右翻转-->
background-image: linear-gradient(45deg,green,red)
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<br>
<div id="d2">
www.qingsword.com
</div>
<br>
<div id="d3">
www.qingsword.com
</div>
</body>
</html>
显示效果：
0×2.多色渐变
可以在linear-gradient内部配置多个颜色值来实现多色渐变效果，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>多色渐变效果实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--使用4色渐变，默认情况下四种颜色将平均分配，红色和绿色的基准线在两端，本例div宽度为250px，那么黄色基准线的位置大约在83.33px的位置-->
background-image: linear-gradient(to right,red,yellow,blue,green);
}
#d2{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--在颜色后跟随像素单位或百分数能够改变基准线位置，绿色的基准线原本在250px处，也就是div的边线上，现在调整到200px处，由于绿色右边没有其他颜色属性，所以不会发生渐变-->
background-image: linear-gradient(to right,red 0px,yellow 20px,blue 166.66px,green 200px);
}
#d3{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--使用百分数设置基准线-->
background-image: linear-gradient(to right,red,yellow 50%,blue 70%,green);
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<br>
<div id="d2">
www.qingsword.com
</div>
<br>
<div id="d3">
www.qingsword.com
</div>
</body>
</html>
显示效果：
0×3.透明渐变
渐变配合rgba颜色选择器可以实现图像的层次效果，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>透明渐变效果实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--配置背景为红色-->
background-color: red;
<!--在背景色的基础上，由下往上配置透明渐变，下方为0.7的黑色透明，上方黑色完全透明，这样就相当于在原本红色背景的基础上覆盖了一层由下往上渐变的黑色效果-->
background-image: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
</body>
</html>
显示效果：
0×4.平铺渐变
配合基准线的设置，平铺渐变能够实现从起始的颜色基准线位置到结束的颜色基准线位置的重复平铺，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>平铺渐变效果实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--本例使用了三色渐变，红色为起始色，蓝色为结束色，设置结束色的基准线在div方块从上往下20%处，因为使用的是平铺渐变，剩余的80%会使用相同的颜色重复填充-->
background-image: repeating-linear-gradient(red,yellow,blue 20%);
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
</body>
</html>
显示效果：
0×5.放射性渐变
放射性渐变与普通渐变稍有区别，顾名思义，这种渐变会呈现放射性效果，而不是线性效果，先来看几个概念。
1）放射源形状
circle 圆形；
ellipse 椭圆形（默认值）；
2）发散方向
at top 从顶部中央发散；
at left 从左侧中央发散；
at right 从右侧中央发散；
at bottom 从底部中央发散；
at center 从图形中心点发散（默认值）；
at top right 从顶部右边发散；
at top left 从顶部左边发散；
at bottom left 从底部左边发散；
at bottom right 从底部右边发散；
3）放射源半径
closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角；
4）配置语法
background-image: radial-gradient([放射源形状] [发散方向] [放射源半径] [指定放射半径],[颜色值1],[颜色值2],[颜色值3],[颜色值N]);
除了颜色值1和2是必选参数外，其他都是可选参数。
下面用一个实例来演示上面这些概念：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>放射渐变效果实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--默认的放射性渐变，从图形中心点向外渐变，渐变颜色支持双色和多色，本例使用了三种颜色-->
background-image: radial-gradient(green,red,yellow);
}
#d2{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--配置渐变中心点的位置为顶部中央，并且配置放射性图形为圆形（默认为椭圆形）-->
background-image: radial-gradient(circle at top,green,red,yellow);
}
#d3{
width: 250px;
height: 400px;
text-align: center;
line-height: 400px;
<!--配置放射半径以哪条边为参考，本例故意将div的高设置成400px，并且使用从圆心到离圆心最远的边作为放射半径-->
background-image: radial-gradient(farthest-side,green,red,yellow);
}
#d4{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--设置放射半径为80px-->
background-image: radial-gradient(80px,green,red);
}
#d5{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
<!--设置放射半径为80px，并使用平铺渐变-->
background-image: repeating-radial-gradient(80px,green,red,yellow);
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<br>
<div id="d2">
www.qingsword.com
</div>
<br>
<div id="d3">
www.qingsword.com
</div>
<br>
<div id="d4">
www.qingsword.com
</div>
<br>
<div id="d5">
www.qingsword.com
</div>
</body>
</html>
显示效果：