徑向漸變在邊框圖像源中不起作用

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>