CSS斑马纹背景

版权声明： https://blog.csdn.net/qq_24884131/article/details/88226032

今天记录一下——CSS斑马纹背景实现
CSS斑马纹背景实现有两种不同的实现方法（还有多的方法大家快分享给我）1、背景的 liner-gradient ；2、设置伪类 nth-of-type（even）/nth-child(even) 的背景颜色。根据条纹形状不同来使用不同方法

竖状、横状

这两种形状能用两种方法实现，但是根据业务不同使用方法也不同：
1、每行条纹上，需要有内容展示，如下
①表格，每行内容互不相干，内容一行展示完毕；此时使用CSS伪类方法方便简洁
②多行内容展示，如下图，此时使用background：liner-gradient来实现，同时需要注意的是background-size需要是line-height2倍

可以看到内容贴着斑马纹底部，不美观我们怎么解决问题呢？不告诉你，自己研究，毕竟不是科普博客，自己多思考总是好的。提示一下和背景设置有关。

2、斜条纹

毫无疑问，这个肯定是背景做的，难不成把div搞成斜的吗。。参考代码：

background: linear-gradient(
        45deg,
        #cc95c0 25%,
        #dbd4b4 0,
        #dbd4b4 50%,
        #cc95c0 0,
        #cc95c0 75%,
        #dbd4b4 0
  );

使用repeat-liner-gradient效果更佳