使用CSS为圆形图像添加外部渐变边框或叠加形状

Question

我尝试使用CSS为图像(图A)添加三种实心颜色的外围渐变边框(图B)，但是迄今为止尝试的方法都没能成功。这些图像将具有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">

你对我应该如何处理这个问题有什么想法？

- Mark Bosky

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

- Temani Afif