我正在尝试使用 CSS 将三种纯色的外部渐变边框（图 B）添加到图像（图 A），但到目前为止我尝试过的方法并没有太多运气。图像将具有 border-radius: 50% 以使它们成为圆形，并且外边框需要随图像缩放。我希望能够仅使用 CSS 类快速将其应用于任何图像。
我尝试过 SVG 蒙版、边框图像和常规叠加，但似乎都无法完成手头的任务。 这支笔是我得到的最接近的，但是我需要图像和边框之间的空白。
.img-circle{
border-radius: 50%;
}
.border {
margin: 25px 0;
/*padding: 1em;*/
border: 12px solid transparent;
background-size: 100% 100%, 60% 60%, 40% 40%, 25% 50%;
background-repeat: no-repeat;
background-image: linear-gradient(white, white),
linear-gradient(30deg, teal 36%, teal 30%),
linear-gradient(120deg, gold 36%, gold 30%),
linear-gradient(210deg, blue 36%, blue 30%);
background-position: center center, left top, right top, left bottom, right bottom;
background-origin: content-box, border-box, border-box, border-box;
background-clip: …