如何防止CSS伪元素绘制的圆形溢出组件并固定其定位？

你当前代码的两个问题本质是定位上下文缺失和溢出未裁切导致的：

• 伪元素设置了position: absolute但父元素没有设置position: relative，伪元素会相对于文档流里最近的定位祖先元素偏移，一旦组件放置位置变化，圆形就会出现错位
• 父元素没有配置溢出隐藏属性，超出组件边界的圆形部分会直接显示在外部

基于原有伪元素方案的修复代码 #

只需要给父元素补充定位锚点和溢出裁切属性，同时把伪元素的定位改为从左下角锚定，就可以彻底解决偏移和溢出问题，圆形尺寸可以后续自行调整：

#element {
  max-width: 750px;
  height: 350px;
  border-radius: 8px;
  background-color: #008001;
  /* 新增核心修复属性 */
  position: relative;
  overflow: hidden;
}

#element:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 1;
  background: #008001;
  border-radius: 50%;
  /* 锚定左下角，偏移量按需调整 */
  bottom: -50px;
  left: -50px;
}

#element:after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background: #fff;
  opacity: 0.5;
  border-radius: 50%;
  /* 锚定左下角，偏移量按需调整 */
  bottom: -75px;
  left: -75px;
}

对应的HTML结构保持不变：

<div id="element"></div>

更优的纯镂空实现方案 #

如果你需要的是圆形位置完全透出组件下方的页面背景（不是叠放同色/白色圆形模拟镂空），可以直接用CSS遮罩实现，不需要伪元素，完全不存在定位偏移、溢出、层级冲突问题：

#element {
  max-width: 750px;
  height: 350px;
  border-radius: 8px;
  background-color: #008001;
  /* 自定义空心圆尺寸 */
  --cut-circle-size: 100px;
  -webkit-mask: radial-gradient(circle at left bottom, transparent 0 var(--cut-circle-size), #000 calc(var(--cut-circle-size) + 1px));
  mask: radial-gradient(circle at left bottom, transparent 0 var(--cut-circle-size), #000 calc(var(--cut-circle-size) + 1px));
}

实现效果参考：

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