本文主要是介绍HTML中三杠按钮,纯CSS图形：三横线(三道杠)padding制作出来，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
其实之前已经分享过一篇，用纯CSS方式实现三横线(三道杠)的方法：
具体代码：{width:120px; height:20px;border-top:60px double;border-bottom:20px solid;}
可能比本文实现的还简单，但既然学习到了padding实现三横线，那就看看padding是如何来实现的吧！
如上图实现的代码如下：
.box{
width: 150px;height: 30px;
border-top: 30px solid;//上边框
border-bottom: 30px solid;//下边框
padding: 30px 0;//中间撑开两个透明区域
background-color:currentColor;//当前的标签所继承的文字颜色，也可自定义颜色值
//关于currentColor说明，详去大神网站去看：http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/
background-clip: content-box;
//这句话是只让背景色在内容区域显示，padding不算内容区了，就不会让padding那上下30px变色，就制作成了三横线！
}
是不是很简单？
这篇关于HTML中三杠按钮,纯CSS图形：三横线(三道杠)padding制作出来的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
