纯CSS如何实现数字加减按钮-创新互联

这篇文章将为大家详细讲解有关纯CSS如何实现数字加减按钮，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司主要业务有网站营销策划、网站建设、成都网站设计、微信公众号开发、微信小程序定制开发、H5页面制作、程序开发等业务。一次合作终身朋友，是我们奉行的宗旨；我们不仅仅把客户当客户，还把客户视为我们的合作伙伴，在开展业务的过程中，公司还积累了丰富的行业经验、全网整合营销推广资源和合作伙伴关系资源，并逐渐建立起规范的客户服务和保障体系。 

前言：

对于数字加减按钮的实现，以前用过不少方案，诸如：

1.使用背景图片——这种效果比较好，缺点是样式控制有点复杂了，还需要使用图片；

2.直接使用“+”“-”——这种方法简单粗暴，最容易实现，缺点是不同浏览器环境下显示略有不同，符号大小机线条粗细不太好调；

3.使用unicode字符，这个跟方法2差不多一样的问题，而且兼容性不好，出现过部分手机不显示的问题；

4.使用css样式，使用标签生成绝对定位的横、竖，然后调整他们的位置，合成加号。缺点就是不同浏览器可能会存在横竖搭配略有错位，这个可以用标签生成两个相同的横，然后其中一个做90度旋转，这样效果会好些；

对于上边这些，可以说好的就是第一种使用图片了，虽说有点麻烦，但是效果好，不用担心兼容性，其他的就不太建议使用了。

最近发现一种新的方法，就是利用CSS3的background-image样式，结合线性渐变linear-gradient合成加号，具体实现如下。

关键代码：

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

其中，关键样式也就后边加粗的两端，经验证，这种方法兼容性还是比较好的，可以说跟h6/css3兼容性一样了。

这可谓是目前见过的最简单的实现方法，佩服想到这种用法的这位仁兄。

关于“纯CSS如何实现数字加减按钮”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

名称栏目：纯CSS如何实现数字加减按钮-创新互联
URL网址：http://shouzuofang.com/article/dpcegi.html