求助：如何为圆形灰度图片添加四分之一绿色边框？

你可以通过给图片添加容器，并利用伪元素来实现这个四分之一圆形边框效果，以下是完整实现代码：

HTML 结构 #

<div class="comitee-image-container">
  <img src="你的图片地址" class="comitee-image" alt="成员图片">
</div>

CSS 代码 #

/* 图片容器 */
.comitee-image-container {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

/* 你的原有图片样式 */
.comitee-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: grayscale(100%);
  object-fit: cover;
}

/* 四分之一绿色边框（以右下角为例） */
.comitee-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 边框宽度和颜色可按需调整 */
  border: 8px solid transparent;
  border-bottom-color: #27ae60;
  border-right-color: #27ae60;
  box-sizing: border-box;
}

效果调整说明 #

• 若要改变边框位置（左上角、右上角、左下角），只需修改伪元素的border-xx-color：
  • 左上角：border-top-color + border-left-color
  • 右上角：border-top-color + border-right-color
  • 左下角：border-bottom-color + border-left-color
• 调整border的数值可改变边框粗细，修改颜色值就能更换边框颜色。

内容的提问来源于stack exchange，提问作者Ana Alilovic