径向渐变在边框图像源中不起作用[重复]

Question

我需要为元素设置边框背景，但它不起作用。谁能告诉我如何解决它？

.boder{
  border: 2px solid;
  border-image-source: radial-gradient(80.38% 222.5% at -13.75% -12.36%, 
  #98F9FF 0%, rgba(255, 255, 255, 0) 100%),
  radial-gradient(80.69% 208.78% at 108.28% 112.58%, #EABFFF 0%, rgba(135, 
  38, 183, 0) 100%);
  boder-radius: 8px;
}

Answer 1

似乎不支持边框图像源中的多个图像（与背景图像不同）。例如，MDN 仅提及一张图像作为可能的值。使用浏览器开发工具进行的检查显示border-image-source 的值无效。

为了解决这个问题，这个 sn-p 将部分边框放在相对于元素本身绝对定位的伪元素中。

.boder {
  border: 2px solid;
  border-image-slice: 1;
  border-image-source: radial-gradient(80.69% 208.78% at 108.28% 112.58%, #EABFFF 0%, rgba(135, 38, 183, 0) 100%);
  width: 30vmin;
  height: 30vmin;
  position: relative;
  border-radius: 8px;
}

.boder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  border: 2px solid transparent;
  border-image-slice: 1;
  border-radius: 8px;
  border-image-source: radial-gradient(80.38% 222.5% at -13.75% -12.36%, #98f9ff 0, rgba(255, 255, 255, 0) 100%);
}

<div class="boder"></div>