<div class="box"></div>

.box {
    
    
  width: 200px;
  height: 200px;
  border: 2px solid;
  border-image: linear-gradient(to top, red, yellow) 1;
}

• 说明

在 CSS 中，border-image 属性的第二个值表示边框图像的宽度。这个宽度是相对于边框的宽度计算的，而不是相对于元素本身的宽度。

在示例中，border-image: linear-gradient(to top, red, yellow) 1; 中的 1 表示边框图像的宽度是边框宽度的 1 倍。这意味着，如果边框的宽度是 10px，那么边框图像的宽度将是 20px。如果边框的宽度是 5px，那么边框图像的宽度将是 10px。这个属性可以用来创建更复杂的边框效果，比如渐变边框、图像边框等。

to top 代表渐变方向