這篇文章將為大家詳細講解有關(guān)純CSS如何實現(xiàn)數(shù)字加減按鈕，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站建設(shè)、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計制作的專業(yè)網(wǎng)絡(luò)公司，擁有經(jīng)驗豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨特的設(shè)計風(fēng)格。自公司成立以來曾獨立設(shè)計制作的站點上千余家。

前言：

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

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

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

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

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

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

最近發(fā)現(xiàn)一種新的方法，就是利用CSS3的 background-image 樣式，結(jié)合線性漸變 linear-gradient 合成加號，具體實現(xiàn)如下。

關(guān)鍵代碼：

.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)驗證，這種方法兼容性還是比較好的，可以說跟h6/css3兼容性一樣了。

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

關(guān)于“純CSS如何實現(xiàn)數(shù)字加減按鈕”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。