CSS 实现 WOW 成就图片金色外框效果

.achievement {
  display: inline-block;
  position: relative;
}

.achievement::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid gold;
  z-index: -1;
}

.achievement img {
  display: block;
  width: 100px; /* 调整宽度和高度以适应实际图片大小 */
  height: auto;
}

在上面的代码中，我们使用伪元素::after来创建一个金色的边框，通过设置其border属性来实现。这个伪元素的位置是绝对定位的，覆盖在成就图片上面，因此需要将.z-index设置为-1，使其在成就图片下方。

注意：以上代码中的宽度和高度是示例代码，你需要根据实际图片的尺寸来调整。