径向渐变在边框图像源中不起作用

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仅提到一个图像作为可能的值。 使用浏览器开发工具进行的检查显示边界图像源的值无效。

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

 .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>