渐变色升高导航栏

当导航栏的背景颜色不是纯色，而是多种颜色混合或者渐变色填充的时候，这个时候就需要使用ps切图平铺来实现了。
css样式

<style>
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        li{list-style: none;}

        .nav{
            width: 995px;
            padding-left: 5px;
            height: 37px;
            margin: 50px auto;
            /* 导航栏背景颜色是渐变色的时候，选择使用剪切垂直向下的1px的图片（1px是遵循最小原则），给导航栏设置背景图，然后默认设置为平铺。./../img/background1.jpg是图片的路径*/
            background: url(./../img/background1.jpg);
        }
        .nav li a {
            float: left;
            width: 77px;
            height: 37px;
            line-height: 37px;
            text-align: center;
            font-size: 14px;
            color: #6b747d;
        }
        .nav li a:hover{
            height: 43px;
            /*鼠标滑过升高6px，背景颜色改变，因为背景色也不是纯色填充，所以同样适用背景平铺*/
            margin-top: -6px;
            background: url(./../img/background2.jpg);
        }
    </style>

页面部分

 <ul class="nav">
        <li><a href="#">渐变色</a></li>
        <li><a href="#">渐变色</a></li>
        <li><a href="#">渐变色</a></li>
        <li><a href="#">渐变色</a></li>
        <li><a href="#">渐变色</a></li>        
    </ul>

ps切图方法：

1. 打开ps软件，选择矩形选框工具，从上往下选择宽度为1px的图片，这里是为了保持最小原则，所以只切1px。
2. 确定选区之后ctrl+c复制，ctrl+n新建一个剪贴板，ctrl+v复制到剪贴板上，ctrl+alt+shift+s存储为WEB所用格式，命名确定。

最后

以上就是糟糕月饼为你收集整理的渐变色升高导航栏的全部内容，希望文章能够帮你解决渐变色升高导航栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。