用::before伪元素实现卡片hover阴影和边框动画，核心是将其作为独立装饰层：卡片设position:relative，::before设absolute+100%宽高+z-index:-1；初始态用transparent边框和微弱阴影，hover时scale放大、实色边框、增强阴影，配合transform/box-shadow精准过渡，避免重排且流畅。
用
伪元素
给卡片加 hover 阴影和边框动画，核心是让伪元素作为“装饰层”独立于内容层，通过 transform + box-shadow 控制过渡效果，避免重排且动画更流畅。
1. 基础结构：卡片容器需
相对定位
卡片本身设为
，这样
才能准确覆盖在它上面，且不脱离文档流：
卡片元素（如
）添加
设为
，宽高设为
，并用
对齐
记得设置
让伪元素垫在内容下方，不影响点击和文字选择
2. 伪元素初始态：透明边框 + 微弱阴影
初始时让装饰不突兀，用透明边框配合轻微阴影，为 hover 留出变化空间：
（别用
，否则 transition 不生效）
加上
（推荐只过渡
、
和
）
3. Hover 时增强视觉：缩放+加深+着色边框
hover 状态下，通过组合变换强化立体感：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
用
轻微放大，模拟“浮起”效果
边框变实色：
（如主色紫）
阴影加厚加深：
可选：加一点
提亮整体，增强反馈
4. 进阶技巧：避免锯齿 & 兼容性处理
真机或高分屏上容易出现伪元素边缘模糊或闪烁，可加几行优化：
给
加
（慎用，仅对频繁动画的卡片）
用
或
触发
硬件加速
若需兼容老
浏览器
，把
拆成具体属性：
基本上就这些。关键不是堆效果，而是让
承担所有装饰动画，主体卡片保持干净，hover 反馈清晰自然又不卡顿。
::beforeposition: relative::before.cardposition: relative;::beforeposition: absolute;100%top: 0; left: 0;z-index: -1;border: 2px solid transparent;nonebox-shadow: 0 2px 8px rgba(0,0,0,0.08);transition: all 0.3s ease;border-colorbox-shadowtransformtransform: scale(1.02);border-color: #4f46e5;box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.3);filter: brightness(1.03);::beforewill-change: transform, box-shadow;backface-visibility: hidden;translateZ(0)transitiontransition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;::before