css3渐变:线性和径向

作者: 越IT | 来源:发表于2017-01-15 01:23 被阅读90次

知识点：

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.

B
C.

C
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>

css3渐变:线性和径向

CSS3 渐变

一、线性渐变

1.线性渐变-从上到下（默认）

2.线性渐变-从左到右

★【备注】：

3.线性渐变–对角

4.线性渐变——使用角度

5.线性渐变——颜色结点

6.线性渐变——透明渐变

7.线性渐变——重复渐变

二、径向渐变

径向渐变属性

径向渐变-颜色结点均匀分布（默认）

径向渐变-颜色结点不均匀分布

径向渐变——设置形状

径向渐变——尺寸大小关键字

练习题：

径向渐变——重复渐变

三、Internet Explorer渐变(IE6-8)

综合案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

从零开始学前端

CSS深入理解