純CSS樣式實現數字加減按鈕的最佳方案

前言：

對於數字加減按鈕的實現，之前用過很多方案，諸如：

1.使用背景圖片——這種效果比較好，缺點是樣式控制有點複雜了，還須要使用圖片；

2.直接使用「+」「-」——這種方法簡單粗暴，最容易實現，缺點是不一樣瀏覽器環境下顯示略有不一樣，符號大小機線條粗細不太好調；

3.使用unicode字符，這個跟方法2差很少同樣的問題，並且兼容性很差，出現過部分手機不顯示的問題；

4.使用css樣式，使用標籤生成絕對定位的橫、豎，而後調整他們的位置，合成加號。缺點就是不一樣瀏覽器可能會存在橫豎搭配略有錯位，這個能夠用標籤生成兩個相同的橫，而後其中一個作90度旋轉，這樣效果會好些；

對於上邊這些，能夠說最好的就是第一種使用圖片了，雖然說有點麻煩，可是效果最好，不用擔憂兼容性，其餘的就不太建議使用了。

最近發現一種新的方法，就是利用CSS3的 background-image 樣式，結合線性漸變 linear-gradient 合成加號，具體實現以下。

關鍵代碼：

<a href="javascript:" class="btn btn_plus" role="button" title="增長"></a>
<input class="inputNum" value="1" size="1">
<a href="javascript:" class="btn btn_minus" role="button" title="減小"></a>

.inputNum {
    vertical-align: middle;
    height: 22px;
    border: 1px solid #d0d0d0;
    text-align: center;
}

.btn {
    display: inline-block;
    vertical-align: middle;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    box-shadow: 0 1px rgba(100, 100, 100, .1);
    color: #666;
    transition: color .2s, background-color .2s;
}

.btn:active {
    box-shadow: inset 0 1px rgba(100, 100, 100, .1);
}

.btn:hover {
    background-color: #e9e9e9;
    color: #333;
} .btn_plus { background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor); background-size: 10px 2px, 2px 10px;
} .btn_minus { background-image: linear-gradient(to top, currentColor, currentColor); background-size: 10px 2px;
}

其中，關鍵樣式也就後邊加粗的兩端，經驗證，這種方法兼容性仍是比較好的，能夠說跟h5/css3兼容性同樣了。

這可謂是目前見過的最簡單的實現方法，佩服想到這種用法的這位仁兄。