如何用HTML/CSS实现四张图片的圆形裁剪2×2网格拼图

要把四张图片排成2×2网格，同时整体裁剪成圆形，用CSS Grid布局加圆形裁剪就能实现，直接上具体代码：

完整代码 #

HTML部分 #

<div class="circular-grid">
  <img src="图片1地址" alt="图1">
  <img src="图片2地址" alt="图2">
  <img src="图片3地址" alt="图3">
  <img src="图片4地址" alt="图4">
</div>

CSS部分 #

.circular-grid {
  /* 设置2列等宽网格 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 网格间的间距，可按需调整 */
  gap: 4px;
  /* 必须设置正方形宽高，才能剪出正圆 */
  width: 300px;
  height: 300px;
  /* 圆形裁剪核心属性 */
  border-radius: 50%;
  /* 隐藏超出圆形范围的内容 */
  overflow: hidden;
  /* 可选：给容器加边框增强视觉效果 */
  border: 3px solid #fff;
}

.circular-grid img {
  /* 图片填满网格单元格 */
  width: 100%;
  height: 100%;
  /* 保持图片比例，裁剪多余部分适配单元格，避免拉伸变形 */
  object-fit: cover;
}

关键细节说明 #

• 网格布局：grid-template-columns: repeat(2, 1fr)让容器自动分成等宽的2列，四张图片会自动排列成2行2列的结构。
• 圆形裁剪：border-radius: 50%配合overflow: hidden，把容器超出圆形的部分裁掉，必须保证容器宽高一致，否则会变成椭圆。
• 图片适配：object-fit: cover确保图片不会拉伸变形，只会裁剪多余区域来填满单元格。

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