本文主要是介绍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制作出来的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!