如何去除黑色背景下渐隐蓝色圆形周围的白色方块？

你的问题出在伪元素的样式设置上：

• 伪元素.circle:after未设置border-radius: 50%，因此它仍保持方形，超出了父元素圆形的范围
• 渐变终点使用了白色rgba(255,255,255,1)，与黑色背景冲突，导致出现白色方块

直接修改CSS即可解决，以下是两种可行方案：

方法一：修复伪元素样式 #

给伪元素添加圆角，同时将渐变终点颜色改为黑色，使其与背景无缝融合：

body {
  background-color: black;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative; /* 确保伪元素相对于父元素定位 */
}

.circle:after {
  content: "";
  position: absolute; /* 避免伪元素撑大父元素 */
  top: 0;
  left: 0;
  border-radius: 50%; /* 让伪元素同步为圆形 */
  width: 100%;
  height: 100%;
  /* 把渐变终点换成黑色，与背景一致 */
  background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%);
}

方法二：直接给圆形设置渐变背景（更简洁） #

无需使用伪元素，直接将蓝色底色与渐隐效果合并为一个背景：

body {
  background-color: black;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  /* 从中心的蓝色，渐变到黑色背景 */
  background-image: radial-gradient(ellipse at center, blue 0%, rgba(0,0,0,1) 70%);
}

两种方案都能消除白色方块，实现黑色背景上渐隐的蓝色圆形效果。

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