技術標籤：csshtml

當導航欄的背景顏色不是純色，而是多種顏色混合或者漸變色填充的時候，這個時候就需要使用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所用格式，命名確定。