H5自适应常用导航图标三横线(三道杠)使用纯CSS图形:三横线(三道杠)padding制作出来

padding绘制三横线图形.png 纯CSS图形:三横线(三道杠)padding制作出来 CSS学习



具体代码:

CSS
{width:120px; height:20px;border-top:60px double;border-bottom:20px solid;}

可能比本文实现的还简单,但既然学习到了padding实现三横线,那就看看padding是如何来实现的吧!

如上图实现的代码如下:

<style>
 .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变色,就制作成了三横线!
 }

</style><div class="box"></div>

是不是很简单?


您可以还会对下面的文章感兴趣:

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。