四分之一圆上可见边框

Question

我想要实现圆形黑白图片和绿线的效果：

我知道如何将图片制作成圆形和黑白，但我不知道如何制作这条绿线。

这是我的代码：

.comitee-image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: grayscale(100%);
  object-fit: cover;
}

有人可以帮助我吗？

Answer 1

您可以将图像包装在

picture

元素内，然后使用

::after

。

img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: grayscale(100%);
  object-fit: cover;
}
picture::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  border: 10px solid green;
}

<picture>
<img src="https://media.istockphoto.com/id/491520707/photo/sample-red-grunge-round-stamp-on-white-background.jpg?s=612x612&w=0&k=20&c=FW80kR5ilPkiJtXZEauGTghNBOgQviVPxAbhLWwnKZk=" />
</picture>