CSS 渐变色边框

See the Pen Gradient Border With Radius by kmmoonlight (@kmmoonlight) on CodePen.

.border-div {
  width: 400px;
  height: 300px;
  border: solid 10px transparent;  //设置边框10px 透明
  border-radius: 20px; //设置边框圆角
  background:
    //先写背景会盖在后写的背景上，先设置padding-box的背景为白色
    linear-gradient(white 0 0) padding-box, 
    //再设置border-box的背景为渐变色，这样白色会把内容区域的渐变色盖住，只留下边框区域的渐变色
    linear-gradient(to right in oklch, indigo, orange) border-box; 
}