用CSS3实现斑马线效果
时间：2023-03-30 18:21:50
CSS
不得不说CSS很华丽，实现斑马线效果的方法有很多种。我整理了4种实现斑马线效果的方法供学习和记录。让我们一一介绍。1.使用box-shadow属性。这可能是最低级的实现。效果：代码：
.test1{position:fixed;顶部：0px；底部：15px；右：15px；宽度：20px；高度：200px；框阴影：#67C23A-40px00，#67C23A-80px0，#67C23A-120px0，#67C23A-160px0，#67C23A-160px0；z-指数：3；背景：#67C23A；设置多个与元素背景色一致的阴影，实现斑马线效果。box-shadow属性可以用“,”分隔每组参数值，从而设置多种阴影效果，这里就是利用box-shadow的这个特性。2.为背景属性设置repeat-linear-gradient渐变值，实现背景色的重复渐变。效果：代码：
.test2{width:500px;高度：80px；边距：20px自动；背景：线性渐变（rgb（217、236、255）35%，rgb（121、187、255）35%）；背景大小：100%30px；}原理：这是通过repeating-linear-gradient()设置一个重复的渐变色。3.通过linear-gradient()设置线性渐变。效果：其实就是文章开头的效果！
.test3{宽度：500px；高度：187px；边距：20px自动；背景：线性渐变（rgb（217、236、255）35%，rgb（121、187、255）35%）；背景大小：100%30px；}原理：先用线性渐变实现rgb(217,236,255)到rgb(121,187,255)背景图，然后用background-size属性设置背景图的范围，约束大小渐变，并通过背景重复实现垂直平铺。4.通过css伪类选择器。这是我最满意的效果。在我们实际业务中，最常用的形式应该就是斑马线效果了。这个实现是最接近我们实际使用过程的。效果：
代码：
ul{border:solid#34495e;边框宽度：1px1px0；列表样式：无；保证金：2em自动；填充：0；宽度：80%；白颜色;}li{border-bottom:1pxsolid#34495e;背景：#0164a5；;}li:nth-child(odd){背景：#3498db；}原理：这个恐怕是最好理解但是效果最好的。渐变是通过nth-child选择器设置奇数子元素的背景色来实现的。参考文档[1]ierfeerCSS3列表项斑马线效果[2]MDNCSS[3]loringrayCSS实现斑马线
