HTML渐变色

在元素background属性里加入“background-image: radial-gradient（起始位置，形状，大小，颜色，颜色，颜色）”

小白小菜鸟

9335人浏览 · 2022-06-28 16:44:19

小白小菜鸟 · 2022-06-28 16:44:19 发布

我们已经熟悉了如何创建一个盒子，如何去给盒子加上点颜色，加上点背景色让盒子达到我们想要的样子，但是又来了一个新的问题，如何再盒子中添加渐变色

让我们的页面更加的美观呢

那么这里我们就要用到：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>