巧用background的repeating-linear-gradient实现斑马条纹背景

background在css中算是我们常用的属性了, 也是很重要的一个属性。

这次尝试使用css的渐变来实现这样一个效果，如下：

花几分钟时间一起来看一下吧。

原理

核心就是使用repeating-linear-gradient属性，可以创建一个由线性渐变重复组成的图形。

废话不多说，上代码：

<div class="stripe-box"></div>

<style>
.stripe-box {
  width: 300px;
  height: 150px;
  background: repeating-linear-gradient(135deg, #333, #333 20px, #fff 20px, #fff 40px);
}
</style>

这里就是利用repeating-linear-gradient重复组成的特性，将按照第一组的组合规律组成图形。

这样，我们就实现了一个简单的斑马条纹背景了。

看一下码上掘金的效果吧

总结

1. 利用background的线性渐变（linear-gradient），实现背景部分
2. 利用repeating-linear-gradient的组合特性，实现斑马条纹