如何让div包含::before伪元素绘制的圆形，消除溢出？

开发者阿泽

2026-5-27

解决伪元素圆形被父容器裁剪的问题

这问题我太熟悉啦！要让.wrapper完全包含住::before伪元素绘制的圆形，不让它溢出，只需要给父容器加两个关键属性就行，咱们来拆解一下：

核心修改点

给.wrapper添加position: relative：因为你的伪元素用了position: absolute，绝对定位元素会相对于最近的已定位（非static）父元素定位。不加这个的话，伪元素会相对于页面根元素（比如body）定位，根本不受.wrapper的约束。
给.wrapper添加overflow: hidden：这个属性是用来裁剪容器内溢出的内容的——不管是普通子元素还是伪元素，只要超出容器范围的部分都会被精准切掉。你之前把overflow: hidden加在伪元素上是没用的，这个属性只作用于元素自身的内容，而我们需要的是父容器来“框住”伪元素。

修改后的完整代码

CSS

.wrapper{ 
  background: #efefef; 
  height: 250px;
  /* 新增的两个关键属性 */
  position: relative;
  overflow: hidden;
} 
.wrapper::before{ 
  width: 300px; 
  height: 300px; 
  border-radius: 50%; /* 这里用50%比500px更优雅，不管宽高多少都能生成正圆 */
  background-image: linear-gradient(to bottom, #F38A00, #EC6E00 100%); 
  position: absolute; 
  right: 20%; 
  content: '';
}