Blob元素色带显示异常，添加更多颜色条后布局错乱求助

问题根源 #

• 所有带.blob类的元素都继承了基础样式里的150px宽高、复杂内阴影和大圆角，包括新增的第3、4、5个子元素。这些子元素本是小尺寸装饰，却被强制套上主Blob的大尺寸样式，直接导致布局混乱。
• 色带不清晰是因为主Blob的内阴影和子元素的白色背景叠加，层级与视觉效果冲突，导致色带糊在一起。

修复方案 #

1. 给主Blob单独加类（比如.main-blob），将大尺寸、内阴影等主样式仅绑定给它，避免子元素继承多余属性。
2. 主Blob设置position: relative，让所有子.blob元素的绝对定位以它为参考，防止脱离文档流后乱跑。
3. 子.blob元素仅保留自身的定位、尺寸、背景和圆角样式，清除继承的无效属性。

修改后的完整代码 #

CSS代码

/* 主Blob容器，仅给该元素添加基础样式 */
.main-blob {
    position: relative; /* 作为子元素定位的参考容器 */
    height: 150px;
    width: 150px;
    border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
    background: transparent;
    box-shadow: inset 6px 33px 20px 0px #00FFFF, inset 20px 80px 15px 0px #FFFF00, 10px 20px 20px 0px #c9c9c9;
}

/* 子Blob元素基础样式，仅保留必要属性 */
.blob {
    position: absolute;
    background: white;
}

.blob:nth-child(1) {
    border-radius: 37% 54% 46% 46%;
    width: 50px;
    transform: rotate(-30deg);
    height: 15px;
    top: 20px;
    left: 40px;
}

.blob:nth-child(2) {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 60px;
    left: 20px;
}

.blob:nth-child(3) {
    border-radius: 60%;
    background: aqua;
    width: 30px;
    height: 10px;
    top: 80px;
    left: 20px;
}

.blob:nth-child(4) {
    border-radius: 70%;
    width: 40px;
    height: 10px;
    top: 100px;
    left: 20px;
}

.blob:nth-child(5) {
    border-radius: 80%;
    width: 40px;
    height: 10px;
    top: 120px;
    left: 20px;
}

HTML代码

<div class="main-blob">
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
</div>

额外优化建议 #

• 若想让色带更清晰，可将主Blob的内阴影替换为子元素背景块，让每个色带成为独立元素，层级更明确，避免与内阴影叠加。
• 调整子元素的z-index属性，控制显示层级，防止被主Blob的阴影遮挡。

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