html中渐变效果怎么弄（HTML渐变色）
我们已经熟悉了如何创建一个盒子 ，如何去给盒子加上点颜色 ，加上点背景色让盒子达到我们想要的样子 ，但是又来了一个新的问题 ，如何再盒子中添加渐变色
让我们的页面更加的美观呢
那么这里我们就要用到：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>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！