css实现导航菜单的渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
li{  width:150px; 
list-style:none; 
margin-top:10px; 
border:#CCC solid 1px;
 border-bottom-right-radius:10px; 
border-top-right-radius:10px;}
ul[class$="1"]{ float:left;}
ul[class$="2"]{ float:left; margin-left:50px;}
ul[class$="3"]{ float:left;}
ul[class$="1"] li{background:#9C0;}
ul[class$="2"] li{background:#0CF;}
ul[class$="3"] li{width:150px; height:18px;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 5;}
.ul1 li:hover{background-color:red;
    -webkit-transition-property:background-color;
    -moz-transition-property:background-color;   
    -o-transition-property:background-color;
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
	
}
.ul2 li:hover{width:250px;
	-webkit-transition-property:width;
    -moz-transition-property:width;   
    -o-transition-property:width;
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;}
</style>
</head>

<body>
<ul class="ul1">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<ul class="ul2">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<ul class="ul3">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</body>
</html>
【本站资源无偿免费分享,如果资源对你有用,希望动动手指点点下面的广告吧!以维持服务器运行】
如需 WordPress 优化加速、主题修改、故障解决等服务,可联系我购买付费服务: 点此联系我 | 近期站内热门福利:
未经允许禁止转载
本文地址:https://www.77nn.net/142.html
版权声明:本文为原创文章,版权归 讯沃blog 所有,未经允许,禁止任何单位或个人转载!

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝、微信、QQ扫一扫,即可进行扫码打赏哦

0
分享到:

评论1

4 + 8 =
  1. 这个好像在哪里看过哟
    开心一刻笑话6年前 (2014-06-02)  江苏省苏州市 回复
    沙发
没有账号? 忘记密码?

社交账号快速登录