技术求助：500px红色边框box未显示，无法将blob放入容器

核心问题 #

.box的边框未显示是因为border简写属性语法错误：CSS中border简写必须包含「宽度、样式、颜色」三个值，其中样式（如solid、dashed）是必填项，缺失样式时浏览器不会渲染边框。你的代码只写了宽度和颜色，因此边框无法显示。

另外还有一个次要问题：.blob未设置position: relative，导致其伪元素的absolute定位参考对象是整个文档，而非.blob，会造成伪元素位置偏移。

修复后的完整代码 #

CSS #

.box {
  border: 500px solid red; /* 补充边框样式solid */
  display: inline-block; /* 可选：避免容器占满整行，按需调整 */
  padding: 20px; /* 可选：给blob留出空间，避免被宽边框遮挡 */
}

.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;
}

HTML #

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

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