css3渐变:线性和径向
知识点：
CSS3 渐变
CSS3 线性渐变
CSS3 径向渐变
CSS3 渐变
渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。
【兼容性】
【备注】：
-webkit-chrome浏览器
-moz-火狐浏览器
-ms-IE浏览器
-o- Opera
一、线性渐变
线性渐变（Linear Gradients）属性是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边）
【语法】
background: linear-gradient(direction, color-stop1, color-stop2, ...);
1.线性渐变-从上到下（默认）
background: linear-gradient(color-stop1, color-stop2, ...);
线性渐变-从上到下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 从上到下（默认情况）</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.线性渐变-从左到右
【语法】
background: -webkit-linear-gradient( begin-direction, color-stop1,color-stop2, ...);
background: -moz-linear-gradient(end-direction, color-stop1, color-
stop2, ...);
background: -o-linear-gradient(end-direction, color-stop1, color-
stop2, ...);
background: linear-gradient(to end-direction, color-stop1, color-stop2,
...);
线性渐变-从左到右
从左到右源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 从左到右</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-linear-gradient(left, red , blue);
background: -moz-linear-gradient(right, red, blue);
background: -o-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
★【备注】：
浏览器为webkit内核，写开始点方向
浏览器为moz和o内核，写结束点方向
标准浏览器是to结束位置
3.线性渐变–对角
background:-webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,...);
background:-moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...);
background:-o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...);
background:linear-gradient(to end-level end-vertical,color-stop1,color-stop2,...);
线性渐变-对角
对角源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 对角</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-linear-gradient( left top, red, yellow, blue);
background: -moz-linear-gradient( right bottom, red, yellow, blue);
background: -o-linear-gradient( right bottom, red, yellow, blue);
background: linear-gradient(to right bottom, red, yellow, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.线性渐变——使用角度
【语法】
background:linear-gradient(angle,color-stop1,color-stop2,...);
【角度说明】
角度是指水平线和渐变线之间的角度，逆时针方向计算。
0deg将创建一个从上到下的渐变，90deg将创建一个从左到右的渐变。
线性渐变-使用角度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 使用角度</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-linear-gradient(135deg, red, yellow, blue);
background: -moz-linear-gradient(135deg, red, yellow, blue);
background: -o-linear-gradient(135deg, red, yellow, blue);
background: linear-gradient(135deg, red, yellow, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.线性渐变——颜色结点
【语法】
background:linear-gradient(color1 length|percentage,color2 length|percentage,...);
线性渐变--颜色结点分布
颜色结点分布源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 颜色结点分布</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
【备注】：颜色结点中
如果最后一个不写值，默认100%，
如果第一个不写值，默认0%
6.线性渐变——透明渐变
线性渐变--使用透明：
线性渐变--使用透明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 使用透明</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7.线性渐变——重复渐变
【语法】
background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage,...);
线性渐变——重复渐变
重复渐变源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 重复渐变</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二、径向渐变
径向渐变属性
从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）
【语法】
background：radial-gradient(center,shape size,start-color,...,last-color);
径向渐变-颜色结点均匀分布（默认）
background:radial-gradient(color-stop1,color-stop2,...);
径向渐变--均匀分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 颜色结点均匀分布（默认情况）</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-radial-gradient(red, blue);
background: -moz-radial-gradient(red, blue);
background: -o-radial-gradient(red, blue);
background: radial-gradient(red, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变-颜色结点不均匀分布
background:radial-gradient(color1 length|percentage,color2 length|percentage,...);
径向渐变--不均匀分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 颜色结点不均匀分布</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-radial-gradient(red 50%, blue 70%);
background: -moz-radial-gradient(red 50%, blue 70%);
background: -o-radial-gradient(red 50%, blue 70%);
background: radial-gradient(red 50%, blue 70%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变——设置形状
【语法】
background:radial-gradient(shape,color-stop1,color-stop2,...);
形状说明
circle——圆形
ellipse——椭圆（默认）
径向渐变--设置形状
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 设置形状</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-radial-gradient(circle, red, blue);
background: -moz-radial-gradient(circle, red, blue);
background: -o-radial-gradient(circle, red, blue);
background: radial-gradient(circle, red, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变——尺寸大小关键字
【语法】
background:radial-gradient(size,color-stop,color-stop2,...);
【关键字说明】
closest-side:最近边
farthest-side:最远边
closest-corner:最近角
farthest-corner：最远角
径向渐变--尺寸大小关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 不同尺寸大小关键字的使用</title>
<style type="text/css">
div.closest-side {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, closest-side, red, blue);
background: -moz-radial-gradient(30% 70%, closest-side, red, blue);
background: -o-radial-gradient(30% 70%, closest-side, red, blue);
background: radial-gradient(30% 70%, closest-side, red, blue);
}
div.farthest-side {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, farthest-side, red, blue);
background: -moz-radial-gradient(30% 70%, farthest-side, red, blue);
background: -o-radial-gradient(30% 70%, farthest-side, red, blue);
background: radial-gradient(30% 70%, farthest-side, red, blue);
}
div.closest-corner {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, closest-corner, red, blue);
background: -moz-radial-gradient(30% 70%, closest-corner, red, blue);
background: -o-radial-gradient(30% 70%, closest-corner, red, blue);
background: radial-gradient(30% 70%, closest-corner, red, blue);
}
div.farthest-corner {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, farthest-corner, red, blue);
background: -moz-radial-gradient(30% 70%, farthest-corner, red, blue);
background: -o-radial-gradient(30% 70%, farthest-corner, red, blue);
background: radial-gradient(30% 70%, farthest-corner, red, blue);
}
</style>
</head>
<body>
<div class="closest-side"></div>
<div class="farthest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-corner"></div>
</body>
</html>
练习题：
要给div元素设置圆形径向渐变，实现圆心到最近边实现从红色到绿色的渐变，下列哪个代码可以实现？（选择一项）
A.
A
B.
B
C.
C
D.
D
答案：D
径向渐变——重复渐变
【语法】
background:repeating-radial-gradien(color1 length|percentage,color2 length|percentage,...);
径向渐变--重复渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 重复渐变</title>
<style type="text/css">
div {
width: 800px; height: 500px;
background: -webkit-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: -moz-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: -o-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: repeating-radial-gradient(red 0%, blue 10%, red 20% );
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、Internet Explorer渐变(IE6-8)
【语法】
filter:progid:DXImage Transform.Microsoft.gradient(startColorstr="startColor",endColorstr="endColor",GradientType=0);
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 特殊案例</title>
<style type="text/css">
div {
width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image:
-moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
-o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
