如何为设置border-radius:50%的圆形图片添加圆形淡出效果？

核心问题分析 #

你之前的写法无效，是因为img是替换元素，浏览器不会给它生成::after或::before伪元素，所以你写的渐变层根本不会渲染出来。

方案一：利用容器伪元素实现 #

把渐变层加到#img-container的::after伪元素上，容器本身已经设置了border-radius:50%，刚好能匹配圆形图片的范围：

#main #img-container {
  border-radius: 50%;
  display: inline-block;
  position: relative;
  /* 加上overflow:hidden，确保伪元素超出圆形的部分被裁剪 */
  overflow: hidden;
}

#main #img-container img {
  width: 30em;
  border-radius: 50%;
  display: block;
  border: 1px solid white;
}

/* 改为容器的伪元素 */
#main #img-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0) 60%, /* 调整这个百分比控制淡出起始位置 */
    rgba(255, 255, 255, 1) 100%
  );
}

• 给容器加overflow:hidden，保证渐变层只在圆形范围内显示，不会溢出成方形
• 修改60%这个数值可以调整淡出边缘的宽度：数值越大，边缘的淡出区域越窄

方案二：用CSS mask属性实现（更简洁） #

直接给img元素使用mask属性，不需要额外伪元素，代码更精简：

#main #img-container img {
  width: 30em;
  border-radius: 50%;
  display: block;
  border: 1px solid white;
  /* 用mask控制可见区域，实现向内淡出 */
  mask: radial-gradient(circle, black 60%, transparent 100%);
  /* 兼容webkit内核浏览器 */
  -webkit-mask: radial-gradient(circle, black 60%, transparent 100%);
}

• mask的原理是通过渐变控制元素可见性：黑色区域完全显示，透明区域完全隐藏
• 同样调整60%的数值，就能控制淡出边缘的宽窄

补充说明 #

两种方案都能实现你要的圆形边缘向内淡出效果：方案一兼容性更好（支持旧版浏览器），方案二更简洁现代，根据你的实际需求选择即可。

内容的提问来源于stack exchange，提问作者Young Mamba