你不知道的linear-gradient小知识

双位置语法

假设我们想要得到以下结果：带有一束等宽的垂直条纹的渐变

颜色的十六进制值为：#5461c8，#c724b1，#e4002b，#ff6900，#f6be00，#97d700，#00ab84和#00a3e0。

如果我们使用linear-gradient实现：

linear-gradient(90deg,  
    #5461c8  12.5%  /* 1*12.5% */,  
    #c724b1  0,  #c724b1  25%  /* 2*12.5% */,  
    #e4002b  0,  #e4002b  37.5%  /* 3*12.5% */,  
    #ff6900  0,  #ff6900  50%  /* 4*12.5% */,  
    #f6be00  0,  #f6be00  62.5%  /* 5*12.5% */,  
    #97d700  0,  #97d700  75%  /* 6*12.5% */,  
    #00ab84  0,  #00ab84  87.5%  /* 7*12.5% */,  
    #00a3e0  0)

虽然实现了需求，但代码看起来不太美观。其实我们还可以使用双位置语法：

linear-gradient(90deg,  
#5461c8  12.5%,  
#c724b1  0  25%,  
#e4002b  0  37.5%,  
#ff6900  0  50%, 
#f6be00  0  62.5%,  
#97d700  0  75%,  
#00ab84  0  87.5%,  
#00a3e0  0)

是不是看上去更简洁一点呢？

repeating-linear-gradient

加入设计师给了这么一个背景：

这时候再使用linear-gradient就可能有些力不从心了，不过我们可以使用repeating-linear-gradient，代码如下：

repeating-linear-gradient(-45deg, #ccc, #ccc 2px, transparent 0, transparent 9px)

是不是很简单呢？