纯CSS实现数字加减按钮的最佳方案
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
前言:
对于数字加减按钮的实现,以前用过不少方案,诸如:
1.使用背景图片——这种效果比较好,缺点是样式控制有点复杂了,还需要使用图片;
2.直接使用“+”“-”——这种方法简单粗暴,最容易实现,缺点是不同浏览器环境下显示略有不同,符号大小机线条粗细不太好调;
3.使用unicode字符,这个跟方法2差不多一样的问题,而且兼容性不好,出现过部分手机不显示的问题;
4.使用css样式,使用标签生成绝对定位的横、竖,然后调整他们的位置,合成加号。缺点就是不同浏览器可能会存在横竖搭配略有错位,这个可以用标签生成两个相同的横,然后其中一个做90度旋转,这样效果会好些;
对于上边这些,可以说最好的就是第一种使用图片了,虽说有点麻烦,但是效果最好,不用担心兼容性,其他的就不太建议使用了。
最近发现一种新的方法,就是利用CSS3的 background-image
样式,结合线性渐变 linear-gradient
合成加号,具体实现如下。
关键代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <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 . 2 s, background-color . 2 s; } .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 ; } |
其中,关键样式也就后边加粗的两端,经验证,这种方法兼容性还是比较好的,可以说跟h5/css3兼容性一样了。
这可谓是目前见过的最简单的实现方法,佩服想到这种用法的这位仁兄。
总结
以上所述是小编给大家介绍的纯CSS实现数字加减按钮的最佳方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关文章
- CSS3紫色发光按钮悬停特效是一款紫色线框按钮,带悬停发光遮罩动画特效。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用2019-11-04
- 这篇文章主要介绍了基于CSS 属性实现按钮悬停边框和背景动画集合,需要的朋友可以参考下2019-05-09
- 这篇文章主要介绍了CSS实现鼠标移动到图片或按钮上改变大小的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-09-03
- 这篇文章主要介绍了CSS实现菜单按钮动画,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-04-12
- 这篇文章主要介绍了css 单选按钮图标替换的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-29
- 这篇文章主要介绍了纯css实现Material Design中的水滴动画按钮的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-10-26
最新评论