十九、渐变
1. 线性渐变
(1) 颜色和角度
- `background-image: linear-gradient(color1,color2,……);`渐变最少两个颜色,才能体现出颜色的变化
- `linear-gradient()`渐变颜色的参数用逗号分开,可以写多种颜色表达方式
- 渐变的方向,按照参数顺序依次向下,可以在颜色前加入角度或关键字控制渐变方向
- `90deg` 角度
- to 终点 关键词,就是终点在哪个位置,top,left,right,bottom,记得加空格 (不建议使用)
【练习】
> 使用七种颜色作出彩虹渐变效果
> 颜色可以使用任何表示色值的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
.d1{
width: 300px;
height: 200px;
border: 2px solid black;
/* 渐变属性 */
background-image:linear-gradient(red,rgb(246,185,34),green,rgb(83,251,239),
blue,rgb(53,0,214),rgb(106,0,122)) ;
}
</style>
</head>
<body>
</body>
<div class="d1"></div>
</html>
【练习】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.nav{
background-color:rgba(160, 146, 146, 0.7);
}
.center{
width: 1000px;
margin:auto;
}
.nav ul{
list-style: none;
height: 40px;
}
.nav ul >li{
width: 200px;
float: left;
text-align: center;
line-height: 40px;
position: relative;
background-image: linear-gradient(90deg,#4cc9f4,#5362b4);
}
.nav ul li a{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div class="nav">
&l