css3实现重复渐变和多色边框

实现目标

小程序页面需要实现收货地址下边框类似这种效果

CSS3代码实现

使用css3背景色新属性：repeating-linear-gradient

 background: -webkit-repeating-linear-gradient(20deg, 
 #009cff, #009cff 10px, #fff 10px, #fff 15px, #ffcb21 15px, #ffcb21 25px, #fff 25px, #fff 30px);

deg为渐变角度，或者可以对应替换成方向

to left,right,top,bottom

渐变范围可选像素

//px或者百分比或者rem

上面的代码效果

区别于linear-gradient多了一个渐变重复。