如何使用CSS伪元素实现卡片阴影效果_before after结合box-shadow

通过::before和::after伪元素结合box-shadow可实现多层立体阴影效果。首先为.card设置定位与圆角，再利用::before创建位于底层的阴影层，通过transform下移4px形成景深；接着使用::after添加顶部线性渐变高光，模拟光照增强立体感；悬停时通过transition动画使::before的box-shadow加深并进一步下移至6px，同时主元素上移-4px，营造卡片抬升的交互反馈。关键在于控制各层阴影透明度、偏移量及过渡平滑性，从而提升视觉层次与质感。

通过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，形成主卡片与投影之间的空间感，看起来更自然。

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

41

查看详情

结合 ::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伪元素实现卡片阴影效果_before after结合box-shadow的详细内容，更多请关注php中文网其它相关文章！