CSS渐变是CSS3的Image模块中新增的内容。利用CSS渐变替代在HTML页面中引入渐变效果的图片,这样减少HTML页面加载的时间,减小带宽的占用。 由于CSS渐变是由浏览器直接生成,在HTML页面缩放时的效果要比图片更好,使得可以更灵活、便捷地调整HTML页面布局。
线性渐变由一个轴(基准线)定义的,并且轴上每个点都具有独立的颜色。
lincar-gradient()
函数构建垂直于基准线的渐变效果,渐变的颜色取决于与之垂直相交的基准线上的色点。 基准线由包含渐变效果容器元素的中心点和一个角度来定义的。基准线上的颜色值则由不同的点来定义,包括起始点、终止点以及两者之间可选的中间点(中间点可以有多个) 起始点是基准线和容器元素的顶点与基准线垂直线的相交点来定义。 终止点是基准线和容器元素最近顶点与基准线垂直线的相交点来定义。 渐变的0度是从下到上的,增加角度会使渐变顺时针旋转。
CSS linear gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。具体语法结构如下:
linear-gradient(<angle> | <S ide-or-corner>, <color-stop>, <color-stop> +)
上述语法的参数说明:
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
div{
position: absolute;
top: 10px;
width: 200px;
height: 200px;
border: 1px solid gray;
}
/* 第一个基本渐变 */
.box1{
left: 10px;
/*
第一个参数:设置渐变的方向
第二个参数。第三个参数···设置渐变的颜色
*/
background: linear-gradient(0,blue,red);
}
/* 第二个基本渐变 */
.box2{
left: 220px;
background: linear-gradient(45deg,blue,red);
}
/* 第三个基本渐变 */
.box3{
left: 430px;
background: linear-gradient(90deg,blue,red);
}
.box4{
left: 640px;
background: linear-gradient(90deg,blue,red,yellow);
}
/* 使用rgba设置 */
.box5{
left: 850px;
background: linear-gradient(90deg,rgba(255,255,255,0),red,yellow);
}
.box6{
left: 1060px;
background: linear-gradient(90deg,rgba(255,255,255,0),red);
}
/* 关键字设置角度 */
.box7{
top: 220px;
left: 10px;
background: linear-gradient(to left,blue,red);
}
.box8{
top: 220px;
left: 220px;
background: linear-gradient(to left bottom,blue,red);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</body>
</html>
渐变兼容性问题(新的语法,因为老语法已废弃):
.box8{
-webkit-background: linear-gradient(to left bottom,blue,red);
-moz-background: linear-gradient(to left bottom,blue,red);
-ms-background: linear-gradient(to left bottom,blue,red);
-o-background: linear-gradient(to left bottom,blue,red);
}
头像滤镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.box1{
width: 200px;
height: 200px;
border-radius: 50%;
}
img{
width: 200px;
float: left;
border-radius: 50%;
}
.lvjing{
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to right,rgba(255,154,158,.7),rgba(250,208,196,.7));
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box1">
<img src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/02/24/20200224111924.jpg" alt="">
<div class="lvjing"></div>
</div>
</body>
</html>
径向渐变由其中心点、边缘形状轮廓、位置以及颜色结束点定义的。
语法radial-gradient(shape at position,clor-stop,color-stop+)
shape
:表示设置的渐变形状,默认表示椭圆position
:表示设置起点的坐标值 size
: 表示设置渐变形状的大小 color-stop
:表示渐变的颜色,可以多个 #212121 50% 50%
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
div {
position: absolute;
top: 10px;
width: 400px;
height: 200px;
border: 1px solid gray;
}
.box1 {
left: 10px;
/*
*/
background: radial-gradient(blue,red);
}
/* 形状为圆形 */
.box2 {
left: 420px;
background: radial-gradient(circle,blue,red);
}
.box3 {
left: 830px;
background: radial-gradient(ellipse,blue,red);
}
.box4{
top: 220px;
left: 10px;
background: radial-gradient(ellipse at 0%,blue,red);
}
.box5{
top: 220px;
left: 420px;
background: radial-gradient(ellipse at 50%,blue,red);
}
.box6{
top: 220px;
left: 830px;
background: radial-gradient(ellipse at 100%,blue,red);
}
.box7{
top: 430px;
left: 10px;
background: radial-gradient(ellipse at 50% 0%,blue,red);
}
.box8{
top: 430px;
left: 420px;
background: radial-gradient(circle 215px at 50%,blue,red);
}
.box9{
top: 830px;
left: 420px;
background: radial-gradient(ellipse 200px at 100%,blue,red);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</body>
</html>
小球案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid gray;
background: radial-gradient(circle at 25% 25%,#DFFFDF,#00DB00,#28ff28);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
repeating-linear-gradient()
函数和 repeating-radial-gradient()
函数来实现重复的渐变效果.
repeating-linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop> +)
/* 一个由下至上的重复线性渐变,
从蓝色开始,40%后变绿,
最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);
重复渐变须在颜色后边设置起始位置,否则与线性渐变相同。
repeating-radial-gradient([ [ <shape> ] || <extent-keyword> ] [ at <position> ]?)
上述语法的参数说明:
与重复线性渐变相似,需加上位置。也就是颜色后加上结束位置。
/* 一个由下至上的重复线性渐变,
从蓝色开始,40%后变绿,
最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);
利用重复渐变实现唱片效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>重复径向渐变实现唱片效果</title>
<style>
.radial-gradient {
position: relative;
width: 262px;
height: 262px;
border-radius: 50%;
background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
background-size: 50% 100%, 100% 50%, 100% 100%;
}
.radial-gradient::after {
position: absolute;
top: 50%;
left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px; height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
content: '';
}
</style>
</head>
<body>
<div class="radial-gradient"></div>
</body>
</html>