如何裁剪同级div？Figma转CSS遇椭圆溢出问题求解

我在Figma中通过给卡片裁剪椭圆形状实现了预期效果，尝试用CSS实现时未达到目标，请问如何移除椭圆形状在同级div上的溢出？

HTML代码 #

<div class='parent-div'>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <div class='shape'></div>
</div>

（注：原生HTML中使用class，React项目可替换为className）

SASS代码 #

.parent-div {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  div {
    background: rgba($color: #000000, $alpha: 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 15px;
    border: solid 1.5px #303030;
  }
  .shape {
    background: #ea0599;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    width: 900px;
    top: 250px;
    filter: blur(100px);
    opacity: 0.5;
    mix-blend-mode: plus-lighter;
  }
}

核心问题是你把模糊椭圆放在了卡片同级层级，且mix-blend-mode导致椭圆效果覆盖在卡片上。以下两种方法可解决：

方法1：将椭圆作为卡片内部背景（贴合Figma逻辑） #

移除独立的.shape元素，给每个卡片添加伪元素生成模糊椭圆，利用卡片的border-radius和overflow: hidden自动裁剪溢出部分：

.parent-div {
  position: relative;
  display: flex;
  gap: 1rem;

  div {
    position: relative;
    background: rgba(#000000, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 15px;
    border: solid 1.5px #303030;
    overflow: hidden; // 裁剪内部伪元素

    &::after {
      content: '';
      position: absolute;
      background: #ea0599;
      border-radius: 50%;
      width: 900px;
      height: 900px;
      top: 250px;
      left: 50%;
      transform: translateX(-50%);
      filter: blur(100px);
      opacity: 0.5;
      mix-blend-mode: plus-lighter;
      z-index: -1; // 放在卡片内容下方
    }
  }
}

方法2：调整层级让椭圆在卡片下方 #

保留独立的.shape元素，通过z-index让椭圆处于卡片下方，同时移除父元素的overflow: hidden：

.parent-div {
  position: relative;
  display: flex;
  gap: 1rem;
  z-index: 0;

  div {
    position: relative;
    background: rgba(#000000, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 15px;
    border: solid 1.5px #303030;
    z-index: 1; // 卡片层级高于椭圆
  }

  .shape {
    background: #ea0599;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 50%;
    width: 900px;
    height: 900px;
    top: 250px;
    margin: auto;
    filter: blur(100px);
    opacity: 0.5;
    mix-blend-mode: plus-lighter;
    z-index: -1; // 椭圆在卡片下方
  }
}

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