创建阴影边框轮廓时意外地在文本上放置阴影

/* 错误示例：错误地将阴影应用到了文本 */
.text-element {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 正确示例：将阴影应用到容器元素 */
.container-element {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 正确示例：分别设置文本阴影和边框阴影 */
.container-element {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 边框阴影 */
}

.text-element {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 文本阴影 */
}

/* 使用伪元素创建阴影效果 */
.container-element {
  position: relative;
}

.container-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: -1;
}