如何为元素添加带透明度的线性渐变边框并与背景色混合？

需要为元素添加线性渐变样式的边框，且边框颜色需与当前背景色混合。当前使用border-image的CSS代码无法生效，不仅border-radius不生效，也没实现和背景混合的效果，但对应的SVG代码已经实现了预期效果，需要用CSS替代SVG的方案。

当前无效的CSS+HTML代码 #

CSS #

html, body {
    background-color: #131519;
}

.box {
  width: 200px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;

  // 尝试实现SVG边框效果，但无法生效
  // 问题：border-radius不生效，未实现颜色混合
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1;
}

HTML #

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

已实现预期效果的SVG代码 #

<svg width="1328" height="293" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="100%" height="100%" rx="10" stroke="url(#paint1_linear_61_8)" stroke-width="2" style="mix-blend-mode:overlay"/>
    <defs>
        <linearGradient id="paint1_linear_61_8" x1="664" y1="0" x2="664" y2="293" gradientUnits="userSpaceOnUse">
            <stop stop-color="white"/>
            <stop offset="1" stop-color="white" stop-opacity="0"/>
        </linearGradient>
    </defs>
</svg>

预期效果示意图 #

由于border-image不支持border-radius，也无法直接实现混合模式，推荐使用伪元素+遮罩+混合模式的方案，代码如下：

html, body {
    background-color: #131519;
}

.box {
  width: 200px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
  border-radius: 10px; /* 对应SVG中的圆角值 */
  background-color: #131519; /* 与背景色一致，避免伪元素透出 */
}

.box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* 边框宽度，对应SVG的stroke-width */
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  /* 使用遮罩只保留边框区域 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: xor;
  mix-blend-mode: overlay; /* 实现边框与背景的颜色混合 */
}

核心思路 #

1. 用伪元素::before覆盖整个容器，通过padding模拟边框的宽度
2. 给伪元素设置线性渐变背景，替代SVG中的渐变描边
3. 利用CSS遮罩的复合效果，只保留伪元素的padding区域（即边框部分）
4. 添加mix-blend-mode: overlay实现边框颜色与背景的混合，和SVG效果一致
5. 继承容器的border-radius，实现圆角边框，解决border-image不支持圆角的问题

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