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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-03

浏览次数：次

返回列表

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

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

通过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 可以在卡片上方添加轻微高光，模拟光线照射效果。

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

.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的详细内容，更多请关注其它相关文章！

# 中文网 # 抖音代刷网站推广 # 企业网站建设需要准 # 兴义关键词排名推荐 # 营销网站推广有什么意义 # 潮州手机网站的建设公司 # 金阊企业网站优化价格 # 关于写seo文章 # 康巴什区营销软件推广 # 岚县附近网站推广平台 # 织金网站关键词排名 # 能让 # css # 可以通过 # 相关文章 # 是从 # 选择器 # 两种类型 # 中不 # 关键在于 # 如何使用 # 伪元素 # html