CSS 代码：创建带边框的六边形图片

以下是使用 CSS 实现带边框的六边形图片的代码：

HTML 代码：

<div class='hexagon'>
  <img src='your-image-url.jpg' alt='Your Image'>
</div>

CSS 代码：

.hexagon {
  position: relative;
  width: 150px;
  height: 86.6px;
  margin: 43.3px 0;
}

.hexagon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hexagon:before,
.hexagon:after {
  content: '';
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index: 2;
}

.hexagon:before {
  top: -43.3px;
  border-bottom: 43.3px solid #333;
}

.hexagon:after {
  bottom: -43.3px;
  border-top: 43.3px solid #333;
}

.hexagon:before,
.hexagon img,
.hexagon:after {
  border: 5px solid #333;
  box-sizing: border-box;
}

代码解释：

.hexagon 类定义了六边形容器的样式，包括宽度、高度、相对定位和外边距。
.hexagon img 类定义了图片的样式，包括绝对定位、宽度、高度、对象适应性 (object-fit) 和图层顺序 (z-index)。
.hexagon:before 和 .hexagon:after 伪元素用于创建六边形的上下边框。
.hexagon:before 伪元素的样式包括相对定位、顶部偏移、下边框和左右斜边。
.hexagon:after 伪元素的样式包括相对定位、底部偏移、上边框和左右斜边。
.hexagon:before、.hexagon img 和 .hexagon:after 三个元素的边框样式都相同，包括边框宽度、颜色和盒模型 (box-sizing)。