CSS3渐变
2018-01-25 本文已影响0人
挥剑斩浮云
CSS3渐变共有3种：（1）线性渐变（linear-gradient）；（2）径向渐变（radial-gradient）；（3）重复渐变（repeating-linear-gradient）；
线性渐变
- 线性渐变，指的就是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。
语法：background:linear-gradient(方向，开始颜色，结束颜色);
- 说明：线性渐变的方向取值有2种，一种是使用角度
deg，另外一种是使用关键字：
线性渐变的方向取值
- 第
2个参数和第3个参数，表示开始颜色和结束颜色，取值可以为关键字、十六进制颜色值、RGBA颜色等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<title>CSS3线性渐变</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right,blue,yellow);
分析：background:linear-gradient(to right,blue,yellow);表示线性渐变方向为“从左到右”，开始颜色为蓝色blue，结束颜色为黄色yellow
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏览器预览效果
- 当然也可以使用长度单位来控制渐变的开始位置与结束位置，在颜色后面用
空格隔开加长度，长度单位可以是px也可以是%等，举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
display: inline-block;
width:300px;
height:300px;
}
.box{
background-image:linear-gradient(to right,black 10%, red 20%, green 80%);
此句表达的意思为：渐变方向为从左到右，0-10%没有渐变显示为black，10%-20%显示为black-red渐变，20%-80%显示为red-green渐变，80%-100%没有渐变显示为green
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在浏览器预览效果
径向渐变
-
CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变
语法：background:radial-gradient(position ,shape size,start-color,stop-color)
- 说明：
-
position：定义圆心位置； -
shape size：由2个参数组成，shape定义形状（圆形或椭圆），size定义大小； -
start-color：定义开始颜色值； -
stop-color：定义结束颜色值； -
position、shapesize都是可选参数，如果省略，则表示该项参数采用默认值。
-
- 1、定义圆心位置
position-
position用于定义径向渐变的圆心位置，属性值跟background-position属性值相似，也有2种情况：（1）长度值，如px、em或百分比等；（2）关键字。 - 如果提供两种参数第一个参数表示横坐标，第二个参数表示纵坐标，如果只提供一个，第二个值默认为
50%，即center
圆心位置取值（关键字）
-
- 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*设置div公共样式*/
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1
{
margin-bottom:10px;
background:-webkit-radial-gradient(orange,blue);
}
#div2
{
background:-webkit-radial-gradient(top,orange,blue);
}
</style>
</head>
<body>
<div id="div1">默认值（center）</div>
<div id="div2">top</div>
</body>
</html>
在浏览器预览效果
- 2、定义形状
shape和定义大小size- （1）定义形状
shape
shape参数取值
- （1）定义形状
- 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*设置div公共样式*/
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1
{
margin-bottom:10px;
background:-webkit-radial-gradient(orange,blue);
}
#div2
{
background:-webkit-radial-gradient(circle,orange,blue);
}
</style>
</head>
<body>
<div id="div1">默认值（ellipse）</div>
<div id="div2">circle</div>
</body>
</html>
在浏览器预览效果
- （2）定义大小
size-
size主要用于定义径向渐变的结束形状大小。
size参数取值
-
- 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*设置div公共样式*/
div
{
width:120px;
height:80px;
line-height:80px;
text-align:center;
color:white;
}
div+div
{
margin-top:10px;
}
#div1{background:-webkit-radial-gradient(circle closest-side,orange,blue);}
#div2{background:-webkit-radial-gradient(circle closest-corner,orange,blue);}
#div3{background:-webkit-radial-gradient(circle farthest-side,orange,blue);}
#div4{background:-webkit-radial-gradient(circle farthest-corner,orange,blue);}
</style>
</head>
<body>
<div id="div1">closest-side</div>
<div id="div2">closest-corner</div>
<div id="div3">farthest-side</div>
<div id="div4">farthest-corner</div>
</body>
</html>
在浏览器预览效果
- 3、开始颜色
start-color和结束颜色stop-color - 参数
start-color用于定义开始颜色，参数stop-color用于定义结束颜色。颜色可以为关键词、十六进制颜色值、RGBA颜色值等。
径向渐变也接受一个颜色值列表，用于同时定义多种颜色的径向渐变。 - 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:-webkit-radial-gradient(red,orange,yellow,green,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏览器预览效果
- 分析：默认情况下，径向渐变颜色节点是均匀分布的，不过我们也可以为每一种颜色添加百分比，来使得各个颜色节点不均匀分布。
- 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1{background:-webkit-radial-gradient(red,green,blue);margin-bottom:10px;}
#div2{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);}
此句表达的意思为：默认为椭圆形，圆心点0-10%没有渐变显示为black，10%-20%显示为black-red渐变，20%-80%显示为red-green渐变，80%-100%没有渐变显示为green
</style>
</head>
<body>
<div id="div1">颜色均匀分布</div>
<div id="div2">颜色不均匀分布</div>
</body>
</html>
在浏览器预览效果
重复渐变
- 重复渐渐
repeating参数与线性渐变linear-gradient和径向渐变linear-gradient相同,重复渐变是在线性渐变和径向渐变基础上的延伸 - 语法：
repeating-linear-gradient 重复线性渐变
repeating-radial-gradient 重复经向渐变
- 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 300px;
height: 400px;
background-image: repeating-linear-gradient(to bottom,orange 0,green 20px);
}
</style>
</head>
<body>
<div class="box box01"></div>
</body>
</html>
线性渐变未重复
线性渐变重复
CSS渐变一些小实例
径向渐变-关键词表示半径大小
CSS3径向渐变制作圆形图标按钮
CSS3重复渐变制作纹理图案
径向渐变-使用关键字表示圆心的位置
线性渐变制作的按钮
CSS3线性渐变-angle用角度设置渐变方向
