22、文本行的斑马条纹

利用渐变背景可以实现多行文本之间的斑马线。

padding:1em;
line-height: 1.5;
background-color: beige; 
background-origin: content-box;  // 通常文本不会从盒子顶部开始,盒子一般会有内边距,所以将背景定义为对齐到内容盒子。
background-image: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);
background-size: 100% 3em;  // 渐变背景的高度大小为行高的2被,这样就能实现间隔条纹的斑马线对齐文本。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,789评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,245评论 4 61
  • 你说爱我胜过一切 会把我置顶,怕漏了我的微信 好久都没有去找寻关于你的痕迹 往事的种种 似乎也都不复当时的模样 岁...
    爱上一叶浮萍阅读 2,463评论 4 14
  • 不知名品牌国贸线投放一个撕裂效果创意广告,为避免人流撕毁广告,每天好几人轮流值班,看看都心疼。
    文笔聊生阅读 3,318评论 0 1
  • 山中石兰道听经,先以犹豫不肯听。 雾来去时见云月,花开落时忍动风。 探江水暖温鱼跃,拾柴落火乍黄星。 逢人只说离山...
    晓惊弓阅读 1,092评论 0 0