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

Question

我正在尝试向图像（图 A）添加三种纯色（图 B）的外部渐变边框使用 CSS，但到目前为止我尝试的方法并没有多少运气。图像将具有 border-radius: 50% 以使它们成为圆形，并且外边界需要与图像一起缩放。我希望仅使用 CSS class.

即可将其快速应用于任何图像

我尝试过 SVG 蒙版、边框图像和常规叠加层，但 none 似乎可以完成手头的任务。 This pen 是我得到的最接近的，但是我需要图像和边框之间的空白。

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

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

Adding an outer gradient border or overlay shape to a circular image using CSS

html

css

border

css-gradients

css-mask