css3 border渐变实现

纵然尝试千万遍，也要把ta给实现

border的一条边框渐变

实现效果如图：

 <div class="border_bottom">borderBottom渐变</div>

方法一：背景渐变 + 遮盖

.border_bottom {
  margin-left: 200px;
  height: 50px;
  width: 150px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(135deg, #fff, #fff),
    linear-gradient(135deg,red, green);
  border-bottom: 2px transparent solid;
}

该方法实现原理：
使用 background-image进行背景的渐变色效果，利用background-image中第一段的linear-gradient使得div里的渐变色恢复成原背景色，而border的色值只需要使用背景色就OK👌
background-clip： 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

• border-box
  背景延伸至边框外沿（但是在边框下层）。
• padding-box
  背景延伸至内边距（padding）外沿。不会绘制到边框处。
• content-box
  背景被裁剪至内容区（content box）外沿。
• text
  背景被裁剪成文字的前景色。

background-origin: 规定了指定背景图片background-image 属性的原点位置的背景相对区域.

• border-box
  背景图片的摆放以border区域为参考
• padding-box
  背景图片的摆放以padding区域为参考
• content-box
  背景图片的摆放以content区域为参考

方法二：利用伪元素 + 渐变

.border_bottom {
  margin-left: 200px;
  height: 50px;
  width: 150px;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, #f80, #2ed);
}

该方法实现原理：
利用伪元素创造一个标签，给标签设置背景色渐变，通过position进行位置的调整