CSS伪元素实现卡片阴影效果详解

本文深入解析了如何巧妙运用CSS伪元素::before和::after配合box-shadow，打造富有层次感与真实景深的立体卡片阴影效果——通过底层伪元素下移制造自然投影、顶层伪元素叠加线性渐变高光模拟光照，并在悬停时联动主元素上移与阴影加深/下移，实现细腻流畅的“抬升式”交互反馈；这种无需额外HTML、仅靠纯CSS即可增强视觉质感的技术方案，不仅显著提升界面精致度与用户体验，更适用于卡片、按钮等多种现代UI组件的设计优化。

通过CSS的伪元素 ::before 和 ::after 结合 box-shadow，可以实现更丰富、立体感更强的卡片阴影效果。这种方法比单纯使用 box-shadow 更具视觉层次，适合用于卡片悬浮、按钮提升等场景。

::before 和 ::after 基础说明

伪元素允许我们在不增加HTML标签的前提下，为元素添加额外的视觉层。它们默认不会显示，需要设置 content 属性并配合定位才能生效。

常见做法是将伪元素定位在卡片背后，通过 transform 位移制造多层阴影或光晕效果。

使用 ::before 实现双层阴影

利用 ::before 创建一层扩散的模糊阴影，增强景深。

.card {
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 12px;
}
<p>.card::before {
content: '';
position: absolute;
top: 0; left: 0;
right: 0; bottom: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
z-index: -1;
transform: translateY(4px);
}</p>

这里 ::before 的阴影被整体下移 4px，形成主卡片与投影之间的空间感，看起来更自然。

结合 ::after 添加高光或边缘光晕

使用 ::after 可以在卡片上方添加轻微高光，模拟光线照射效果。

.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(255,255,255,0.6) 0%, 
    transparent 60%
  );
  border-radius: 12px;
  pointer-events: none; /* 不影响交互 */
  z-index: 1;
}

这个高光层让卡片看起来像是从上方受光，增强立体感，特别适合浅色背景中的卡片。

悬浮时动态增强阴影

当用户悬停卡片时，可以通过过渡动画加深阴影，提升交互反馈。

.card {
  transition: transform 0.3s ease;
}
<p>.card::before {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}</p><p>.card:hover::before {
box-shadow: 0 18px 30px rgba(0,0,0,0.25);
transform: translateY(6px);
}</p><p>.card:hover {
transform: translateY(-4px);
}</p>

悬浮时主卡片上移，同时伪元素阴影变得更深更远，营造“抬升”效果。

基本上就这些。用好 ::before 和 ::after 配合 box-shadow，能让卡片设计更有质感，关键在于控制透明度、偏移和过渡的协调。不复杂但容易忽略细节。

本篇关于《CSS伪元素实现卡片阴影效果详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！