如何用CSS3边框阴影实现2种图片列表展示效果

CSS3的box-shadow属性可以为元素添加阴影效果，不需要额外引入图片或者复杂的样式，就能让图片列表产生立体的层次感。我们可以通过调整阴影的偏移、模糊半径、扩散半径和颜色，实现不同的展示风格。

box-shadow属性基础说明

box-shadow的语法格式为：box-shadow: h-shadow v-shadow blur spread color inset;，各个参数含义如下：

• h-shadow：水平阴影的位置，允许负值，正值向右偏移，负值向左偏移
• v-shadow：垂直阴影的位置，允许负值，正值向下偏移，负值向上偏移
• blur：可选，模糊半径，值越大阴影越模糊，默认是0
• spread：可选，阴影的扩散半径，正值阴影扩大，负值阴影缩小，默认是0
• color：可选，阴影的颜色，支持所有合法的颜色值
• inset：可选，设置为内阴影，不设置则是外阴影

第一种效果：悬浮上浮的卡片式图片列表

这种效果常见于商品展示列表，鼠标悬浮在图片上时，阴影变大，图片有向上浮起的感觉，增强交互感。

HTML结构

<div class="image-list">
  <div class="image-item">
    <img src="https://picsum.photos/200/150?random=2" alt="示例图片1">
    <p class="image-title">示例图片1</p>
  </div>
  <div class="image-item">
    <img src="https://picsum.photos/200/150?random=3" alt="示例图片2">
    <p class="image-title">示例图片2</p>
  </div>
  <div class="image-item">
    <img src="https://picsum.photos/200/150?random=4" alt="示例图片3">
    <p class="image-title">示例图片3</p>
  </div>
</div>

CSS样式代码

/* 列表容器样式 */
.image-list {
  display: flex;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
}

/* 单个图片项基础样式 */
.image-item {
  width: 220px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  /* 基础阴影：水平0，垂直2px，模糊8px，扩散0，浅灰色 */
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 鼠标悬浮时的样式 */
.image-item:hover {
  /* 悬浮时阴影变大，垂直偏移增加到8px，模拟上浮效果 */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

/* 图片样式 */
.image-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

/* 标题样式 */
.image-title {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

第二种效果：带层次感的堆叠式图片列表

这种效果模拟多张图片堆叠的效果，阴影从下到上逐渐变浅，适合展示相册类的图片列表。

HTML结构

<div class="stack-image-list">
  <div class="stack-item">
    <img src="https://picsum.photos/200/150?random=5" alt="堆叠图片1">
  </div>
  <div class="stack-item">
    <img src="https://picsum.photos/200/150?random=6" alt="堆叠图片2">
  </div>
  <div class="stack-item">
    <img src="https://picsum.photos/200/150?random=7" alt="堆叠图片3">
  </div>
</div>

CSS样式代码

/* 堆叠列表容器 */
.stack-image-list {
  position: relative;
  width: 220px;
  height: 180px;
  margin: 20px auto;
}

/* 单个堆叠项样式 */
.stack-item {
  position: absolute;
  width: 200px;
  height: 150px;
  padding: 5px;
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 第一层图片，最底层，阴影最大 */
.stack-item:nth-child(1) {
  top: 20px;
  left: 10px;
  /* 较大的阴影，模拟最底层的投影 */
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
  z-index: 1;
}

/* 第二层图片，中间层，阴影中等 */
.stack-item:nth-child(2) {
  top: 10px;
  left: 5px;
  /* 中等大小的阴影 */
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.12);
  z-index: 2;
}

/* 第三层图片，最顶层，阴影最小 */
.stack-item:nth-child(3) {
  top: 0;
  left: 0;
  /* 最小的阴影 */
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 3;
}

/* 鼠标悬浮时所有层都上浮，阴影统一变大 */
.stack-image-list:hover .stack-item:nth-child(1) {
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.stack-image-list:hover .stack-item:nth-child(2) {
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.stack-image-list:hover .stack-item:nth-child(3) {
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

/* 图片样式 */
.stack-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

两种效果的适用场景

第一种卡片式效果适合需要强交互感的场景，比如电商商品列表、文章封面列表，用户可以通过悬浮效果感知可点击性。第二种堆叠式效果适合相册展示、作品集展示等场景，能营造出自然的图片堆叠氛围，视觉上更有设计感。

实际使用中可以根据项目需求调整box-shadow的参数，比如修改颜色适配品牌色，调整模糊半径控制阴影的柔和度，也可以结合其他CSS3属性比如border-radius、transform实现更丰富的效果。

CSS3box_shadow图片列表边框阴影修改时间：2026-06-15 11:48:37