我試圖把我的泡泡(blob)放到一個有紅色邊框的500像素大小的盒子里，但是我做不到，請幫助我理解我的紅色盒子在樣式表中被放錯了位置

.box {
  border: 500px red;
}

.blob {
  height: 150px;
  width: 150px;
  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::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

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

您的邊界屬性缺少實體，如下所示:

border: 500px solid red;

然而，有這么厚的邊界，你的泡沫就被吞沒了。下面的代碼片段顯示了1px的邊框

.box {
  border: 1px solid red;
}

.blob {
  height: 150px;
  width: 150px;
  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::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

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

你的問題有點不清楚:& quot500像素大小的盒子& quot:500像素什么–寬度，高度？在下面的代碼片段中，我將其寬度和高度設置為500像素，并定義了紅色的實線邊框和1像素寬。根據你的需要采用它...

要使內容居中，您可以添加flex設置，如下所示。那樣的話，還要加上位置:相對；敬。blob使其成為絕對定位偽元素的位置引用。

.box {
  border: 1px solid red;
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blob {
  height: 150px;
  width: 150px;
  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;
  position: relative;
}

.blob::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

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