简单讲一下利用linear-gradient来制作双色渐变下划线

计划做一个红蓝双色渐变的的下划线

如下图，要做出这个下划线，首先我们得明白一个核心：这个效果肯定是利用渐变来制作的。

CSS3 渐变（Gradients）

它有2种定义：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
我们这里用线性渐变：linear-gradient————语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
和repeating-linear-gradient————语法：background：repeating-linear-gradient(red, yellow 10%, green 20%);

代码

首先设置好渐变样式

  background: linear-gradient(white, white) padding-box,//先设置先行渐变为从白色到白色，padding-box则设置了渐变内容裁剪到内边距框了
                repeating-linear-gradient(to left top, red 0,
                red 12.5%, transparent 0, transparent 25%, #58a 0,
                #58a 37.5%, transparent 0, transparent 50%) 0/60rpx 60rpx;//设置了颜色见渐变是从左到坐上，红白蓝交替渐变，大小。
}

这样还是现实不出来，因为还少了border：补上即可：border-bottom: 5rpx solid transparent;