我们已经熟悉了如何创建一个盒子，如何去给盒子加上点颜色，加上点背景色让盒子达到我们想要的样子，但是又来了一个新的问题，如何再盒子中添加渐变色
让我们的页面更加的美观呢
那么这里我们就要用到：background-image: -webkit-linear-gradient
在元素background属性里加入“background-image: radial-gradient（起始位置，形状，大小，颜色，颜色，颜色）”；
线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化
标准模式的语法(不添加浏览器前缀)：background:linear-gradient(direction,color-stop1,color-stop2)
说明：direction默认值是to bottom，即从上往下
stop:颜色的分布位置，默认均匀分布(平均分布)
具体代码大家可以试试
background-image: -webkit-linear-gradient(left,rgb(0,208,212),rgb(158,255,164)) ;
说明：direction值不能加to，该值表示颜色从该方向开始渐变，与上面相反
stop:颜色的分布位置，默认均匀分布(平均分布)
渐变方向：前面实现了上下或左右渐变，接下来介绍对角线型渐变
1、to left \ to right \ to top(上下或左右渐变)
2、to left top \ to right bottom(对角线渐变)
3、渐变线角度的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>去哪导航</title>
<style>
#box {
width: 1800px;
height: 40px;
background-image: -webkit-linear-gradient(left,rgb(0,208,212),rgb(158,255,164)) ;
font-size: 15px;
text-align: center;
}
.box1 {
width: 52px;
height: 40px;
float: left;
}
.box2 {
width: 67px;
height: 40px;
float: left;
}
.box3 {
width: 88.51px;
height: 40px;
float: left;
}
.box4 {
width: 82px;
height: 40px;
float: left;
}
.box5 {
width: 52px;
height: 40px;
float: left;
}
.box6 {
width: 82px;
height: 40px;
float: left;
}
.box7 {
width: 82px;
height: 40px;
float: left;
}
.box8 {
width: 82px;
height: 40px;
float: left;
}
.box9 {
width: 82px;
height: 40px;
float: left;
}
.box10 {
width: 67px;
height: 40px;
float: left;
}
.box11 {
width: 67px;
height: 40px;
float: left;
}
a {
position: relative;
display: block;
height: 40px;
line-height: 40px;
font-size: 15px;
color:white;
text-decoration: none;
font-family: "xiyangyang";
}
.ww {
font-family: "xiyangyang";
color: white;
}
@font-face {
/* 字体起的名字 */
font-family: "xiyangyang";
/* 引入字体的路径 */
src: url(./字体/ZCOOLKuaiLe-Regular.ttf);
}
.box1:hover{
background-color:rgb(0,188,212) ;
}
.box2:hover{
background-color:rgb(0,188,212) ;
}
.box3:hover{
background-color:rgb(0,188,212) ;
}
.box4:hover{
background-color:rgb(0,188,212) ;
}
.box5:hover{
background-color:rgb(0,188,212) ;
}
.box6:hover{
background-color:rgb(0,188,212) ;
}
.box7:hover{
background-color:rgb(0,188,212) ;
}
.box8:hover{
background-color:rgb(0,188,212) ;
}
.box9:hover{
background-color:rgb(0,188,212) ;
}
.box10:hover{
background-color:rgb(0,188,212) ;
}
.box11:hover{
background-color:rgb(0,188,212) ;
}
</style>
</head>
<body>
<div id="box">
<div class="box1">
<a href="#" class="ww">首页</a>
</div>
<div class="box2">
<a href="#" class="ww">机票</a>
</div>
<div class="box3">
<a href="#">酒店</a>
</div>
<div class="box4">
<a href="#">火车票</a>
</div>
<div class="box5">
<a href="#">度假</a>
</div>
<div class="box6">
<a href="#">团购</a>
</div>
<div class="box7">
<a href="#">门票</a>
</div>
<div class="box8">
<a href="#">当地人</a>
</div>
<div class="box9">
<a href="#">汽车票</a>
</div>
<div class="box10">
<a href="#">行程设计</a>
</div>
<div class="box11">
<a href="#">更多</a>
</div>
</div>
</body>
</html>