CSS3 实现 div 底部边框渐变色

可以使用 CSS3 的线性渐变实现 div 底部边框的渐变色效果。

示例代码：

div {
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, #f00 0%, #ff0 50%, #0f0 100%);
}

解释：

• 'border-bottom'：设置底部边框，可以根据需要设置宽度、样式等；
• 'border-image'：设置边框图片，通过线性渐变生成。'to right' 表示从左到右渐变，'#f00 0%' 表示从 0% 位置开始渐变为红色，'#ff0 50%' 表示在 50% 位置渐变为黄色，'#0f0 100%' 表示在 100% 位置渐变为绿色。

效果如下图所示：