CSS实现边框底部渐变色的4种方法

/* 方法1: 使用线性渐变背景图片 */
.element {
  background-image: linear-gradient(to right, red, yellow);
  background-repeat: no-repeat;
  background-size: 100% 2px; /* 控制渐变高度 */
  background-position: bottom; /* 控制渐变位置 */
}
 
/* 方法2: 使用伪元素 */
.element::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* 控制渐变高度 */
  background-image: linear-gradient(to right, red, yellow);
}
 
/* 方法3: 使用SVG作为背景图片 */
.element {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='2px'><linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:red' /><stop offset='100%' style='stop-color:yellow' /></linearGradient><rect width='100%' height='2' fill='url(%23grad)' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 2px; /* 控制渐变高度 */
  background-position: bottom; /* 控制渐变位置 */
}
 
/* 方法4: 使用border-image */
.element {
  border-width: 2px 0 0; /* 控制渐变高度 */
  border-image: linear-gradient(to right, red, yellow) 30 round;
  border-image-slice: 100% 50%; /* 调整边框图像的切片宽度 */
}

以上代码示例展示了如何在CSS中实现边框底部渐变色的四种不同方法。每种方法都有其优点和适用场景，开发者可以根据具体需求选择合适的方法。