.blob {
            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:nth-child(1)
            {
            position: absolute;
            border-radius: 37% 54% 46% 46%;
            background: white;
            width: 50px;
            transform: rotate(-30deg);
            height: 15px;
            top: 20px;
            left: 40px;
        }
         .blob:nth-child(2)
        {
            position: absolute;
            border-radius: 50%;
            background: white;
            width: 10px;
            height: 10px;
            top: 60px;
            left: 20px;
        }
/*
.blob:nth-child(3) {
  position: absolute;
  border-radius: 60%;
  background: aqua;
  width: 30px;
  height: 10px;
  top: 80px;
  left: 20px;
}

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

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

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

您的主形狀和背景正在被應(yīng)用到。斑點(diǎn)元素。但是，然后使用n-child用特定于元素的樣式覆蓋所有這些樣式，并且沒有留下任何主元素來顯示原始背景和形狀。

嘗試包裝。不同元素中的blob元素將僅應(yīng)用形狀和背景。這樣你就不會(huì)讓第n個(gè)子圖形覆蓋主圖形。

.shape {
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  background: transparent;
  box-shadow: inset 6px 33px 20px 0px #800080, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9;
}

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

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

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

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

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

<div class="shape">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>