純CSS如何實現(xiàn)數(shù)字加減按鈕

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

前言：

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

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

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

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

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

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

最近發(fā)現(xiàn)一種新的方法，就是利用CSS3的 background-image 樣式，結合線性漸變 linear-gradient 合成加號，具體實現(xià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;
}

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

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

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