如何在当前径向渐变形状的背景上添加边框颜色？

Question

我花了几天时间努力使用径向渐变形状将边框颜色带入背景。我参考下面的链接来实现曲线形状概念

https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/

这里的问题是，当我弯曲时，它工作得很好，但是当我向整体添加边框时，它总是变成一个盒子，并且不会随曲线变化。我尝试过的代码正在使用

psuedo before after concept, border with inset, radius etc, background colour linear gradient

.box {
  width:300px;
  aspect-ratio:1.5;
  background:
    radial-gradient(circle 30px at top    left ,#0000 98%,red  ) top    left,
    radial-gradient(circle 30px at top    right,#0000 98%,blue ) top    right,
    radial-gradient(circle 30px at bottom left ,#0000 98%,green) bottom left,
    radial-gradient(circle 30px at bottom right,#0000 98%,purple) bottom right;
  background-size:51% 51%;
  background-repeat:no-repeat;
}

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

任何帮助将不胜感激。谢谢

Answer 1

快速决策。不过，还可以做得更好。

.box {
  width: 300px;
  aspect-ratio: 1.5;
  background: radial-gradient(circle 30px at top left, #0000 98%, red) top left, radial-gradient(circle 30px at top right, #0000 98%, blue) top right, radial-gradient(circle 30px at bottom left, #0000 98%, green) bottom left, radial-gradient(circle 30px at bottom right, #0000 98%, purple) bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  position: relative;
}

.box:after {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 30px at top left, #0000 98%, #DFB44F) top left, radial-gradient(circle 30px at top right, #0000 98%, #DFB44F) top right, radial-gradient(circle 30px at bottom left, #0000 98%, #DFB44F) bottom left, radial-gradient(circle 30px at bottom right, #0000 98%, #DFB44F) bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  transform: scale(102%, 103%);
}

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