• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

纯CSS图形：三横线(三道杠)padding制作出来_CSS学习

当前位置：网站建设 > 技术支持

其实之前已经分享过一篇，用纯CSS方式实现三横线（三道杠）的方法：

CSS小技巧:border-style:double制作三横线

具体代码：

{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>

是不是很简单？

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。