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

創(chuàng)新互聯(lián)公司主要業(yè)務(wù)有網(wǎng)站營銷策劃、網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、微信小程序定制開發(fā)、H5頁面制作、程序開發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務(wù)的過程中，公司還積累了豐富的行業(yè)經(jīng)驗、全網(wǎng)整合營銷推廣資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。 

前言：

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

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

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

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

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

對于上邊這些，可以說好的就是第一種使用圖片了，雖說有點麻煩，但是效果好，不用擔(dā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é)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享標(biāo)題：純CSS如何實現(xiàn)數(shù)字加減按鈕-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://weahome.cn/article/dpcegi.html