实现目标
小程序页面需要实现收货地址下边框类似这种效果
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多了一个渐变重复。