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