如何使用CSS Gradient实现与示例图一致的双色虚线自定义边框？

根据你提供的示例图，边框特征是四条边分别带有线性渐变：上下边框为水平方向渐变，左右边框为垂直方向渐变，色彩过渡连贯。下面是两种可行的实现方案：

方案一：伪元素+多层渐变（精准控制，推荐） #

这种方法通过伪元素模拟边框，能完美还原示例的渐变方向，避免角部断裂问题：

<div class="gradient-border">
  这里放内容
</div>

.gradient-border {
  position: relative;
  width: 300px;
  height: 200px;
  padding: 20px;
  background: #ffffff; /* 背景色和伪元素透明区域匹配 */
}

.gradient-border::before,
.gradient-border::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none; /* 不影响内部元素点击 */
}

/* 上下边框：上边左浅右深，下边左深右浅 */
.gradient-border::before {
  background: 
    linear-gradient(to right, #8ab4f8, #1967d2) top / 100% 2px no-repeat,
    linear-gradient(to right, #1967d2, #8ab4f8) bottom / 100% 2px no-repeat;
}

/* 左右边框：左边上浅下深，右边上深下浅 */
.gradient-border::after {
  background: 
    linear-gradient(to bottom, #8ab4f8, #1967d2) left / 2px 100% no-repeat,
    linear-gradient(to bottom, #1967d2, #8ab4f8) right / 2px 100% no-repeat;
}

参数调整说明 #

• 把#8ab4f8和#1967d2换成你需要的渐变颜色，完全匹配示例图色彩
• 修改2px可以调整边框的粗细
• 调整to right/to bottom这类方向值，能改变渐变的走向

方案二：border-image快速实现 #

如果对渐变方向的细节要求不高，用border-image可以快速实现环绕渐变边框：

.gradient-border {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid transparent;
  border-image: linear-gradient(to right, #8ab4f8, #1967d2, #8ab4f8, #1967d2) 1;
}

这种方式的渐变是环绕整个边框的，角部自动衔接，但无法单独控制上下左右的渐变方向。

内容的提问来源于stack exchange，提问作者mozenge