前言：

對于數(shù)字加減按鈕的實現(xiàn)，以前用過不少方案，諸如：

1.使用背景圖片——這種效果比較好，缺點是樣式控制有點復(fù)雜了，還需要使用圖片；

2.直接使用“+”“-”——這種方法簡單粗暴，最容易實現(xiàn)，缺點是不同瀏覽器環(huán)境下顯示略有不同，符號大小機線條粗細(xì)不太好調(diào)；

3.使用unicode字符，這個跟方法2差不多一樣的問題，而且兼容性不好，出現(xiàn)過部分手機不顯示的問題；

4.使用css樣式，使用標(biāo)簽生成絕對定位的橫、豎，然后調(diào)整他們的位置，合成加號。缺點就是不同瀏覽器可能會存在橫豎搭配略有錯位，這個可以用標(biāo)簽生成兩個相同的橫，然后其中一個做90度旋轉(zhuǎn)，這樣效果會好些；

對于上邊這些，可以說最好的就是第一種使用圖片了，雖說有點麻煩，但是效果最好，不用擔(dān)心兼容性，其他的就不太建議使用了。

最近發(fā)現(xiàn)一種新的方法，就是利用CSS3的

background-image 

linear-gradient 

關(guān)鍵代碼：

<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;
}

其中，關(guān)鍵樣式也就后邊加粗的兩端，經(jīng)驗證，這種方法兼容性還是比較好的，可以說跟h5/css3兼容性一樣了。

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

總結(jié)

以上所述是小編給大家介紹的純CSS實現(xiàn)數(shù)字加減按鈕的最佳方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對軟件開發(fā)網(wǎng)網(wǎng)站的支持！