使用 CSS 将外部渐变边框或覆盖形状添加到圆形图像

Question

我正在尝试使用 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: content-box, border-box, border-box, border-box;
}

<img src="https://placeimg.com/280/280/any" class="border img-circle">

关于我应该如何处理这个问题有什么想法吗？

Answer 1

我会像下面那样做。两个用于圆圈的径向渐变，一个用于剩余颜色的圆锥曲线和一个用于创建间隙的蒙版：

.img-circle{
  border-radius: 50%;
} 
.border {
  padding: 2em;
  background:
   radial-gradient(farthest-side,teal 98%,#0000) 33%  97%/1em 1em,
   radial-gradient(farthest-side,gold 98%,#0000) 100% 50%/1em 1em,
   conic-gradient(from -160deg, teal 120deg, blue 0 210deg,gold 0 250deg,#0000 0);
  background-repeat:no-repeat;
  -webkit-mask:
    radial-gradient(farthest-side, 
     #000  calc(99%  - 2em),
     #0000 calc(100% - 2em) calc(99% - 1em), 
     #000  calc(100% - 1em))
}

body {
  background:#ccc;
}

<img src="https://placeimg.com/280/280/any" class="border img-circle">