7:渐变(背景-属性)
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。
1.1.1 线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果,如下图是从黄色渐变到绿色。
1、必要的元素:
a、方向
b、起始色
c、终止色
2、关于方向
设置渐变方向,可以用关键字如to top、to right,也可以用角度(正负值均可)如45deg、-90deg等,当以角度做为参数时,可参照下图来使用,0deg从下往上,90deg从左向右,进而可以推算出180deg从上向下。
/* 默认是从上到下的渐变*/
#grad {
height: 100px;
background: linear-gradient(red,blue);
}
/* 从左到右的渐变*/
#right-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to right, red, blue);
}
/* 从左上角到右下角*/
#angles-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to bottom right, red, green);
}
/* 多种颜色的渐变*/
#colorful-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
/* 带透明度渐变*/
#transparency-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));
}
/* 重复颜色的渐变*/
#repeat-grad {
margin-top: 50px;
height: 100px;
/*表示百分之10的地方是红色,百分之30的地方是绿色*/
background: linear-gradient(toright, red 10%, green 30%);
****相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*线性渐变:linear-gradient 1:方向(to 方向单词组合或者角度)2:起始的颜色 3:终止的颜色 */
div {
margin-bottom: 30px;
}
.grad {
height: 100px;
background: linear-gradient( yellow, green);
}
.right-grad {
height: 100px;
background: linear-gradient(to right, yellow, green);
}
.angle-grad {
height: 100px;
background: linear-gradient(to right bottom, yellow, green);
}
.colorful-grad {
height: 100px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
.transparency-grad {
height: 100px;
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));
}
.repeat-grad {
height: 100px;
background: linear-gradient(to right, red 15%, green 50%);
}
</style>
</head>
<div class="grad">普通线性渐变,从上到下,默认是从上倒下</div>
<div class="right-grad">从左到右渐变</div>
<div class="angle-grad">从左上角到右下角</div>
<div class="colorful-grad">多种颜色的渐变</div>
<div class="transparency-grad">带透明度的渐变</div>
<div class="repeat-grad">重复颜色的渐变</div>
<body>
</body>
</html>
相关效果