如何使用CSS实现画廊悬停切图及图片双层边框效果

针对你开发悬停自动切图画廊组件时需要的双层边框效果，纯CSS即可实现，不需要额外依赖，不会和现有图片切换交互冲突。
参考效果如下：

推荐实现方案（灵活度最高） #

用容器伪元素实现错位双层边框，支持自定义偏移量、边框颜色/粗细，适配各种动画场景：

• 第一步：给图片外层包裹容器，设置相对定位，预留边框偏移空间

/* 图片外层容器 */
.gallery-card {
  position: relative;
  padding: 10px;
  width: fit-content;
  /* 避免溢出的边框被父容器裁切 */
  overflow: visible;
}
/* 画廊内图片样式 */
.gallery-card img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

• 第二步：用两个伪元素分别生成两层错位边框，层级放在图片下方

.gallery-card::before,
.gallery-card::after {
  content: "";
  position: absolute;
  border: 2px solid #1a1a1a;
  z-index: 1;
}
/* 左上偏移的内层边框 */
.gallery-card::before {
  top: 8px;
  left: 8px;
  right: 12px;
  bottom: 12px;
}
/* 右下偏移的外层边框 */
.gallery-card::after {
  top: 12px;
  left: 12px;
  right: 8px;
  bottom: 8px;
}

• 如果你的画廊有悬停切换的过渡动效，直接给伪元素加上和图片一致的transition属性即可，动效不会割裂：

.gallery-card::before,
.gallery-card::after,
.gallery-card img {
  transition: all 0.3s ease;
}

极简实现方案（无错位需求时用） #

如果不需要双层边框的错位效果，只是要两层平行边框，直接用border+outline组合实现，代码量最少：

.gallery-card img {
  border: 2px solid #1a1a1a;
  outline: 2px solid #1a1a1a;
  outline-offset: 6px;
}

注意：如果你的画廊区域设置了overflow: hidden，一定要给容器留够足够的内边距，不然偏移出来的边框会被直接裁掉，看不到双层效果。你可以根据设计需求调整边框粗细、偏移距离、边框颜色，完全匹配参考图的视觉效果。

内容的提问来源于stack exchange，提问作者Faheem Akram