用::after伪元素实现hover底部渐隐阴影最干净，需父元素设position:relative和z-index:1，::after用linear-gradient创建12–24px高渐变阴影层，bottom设负值定位，通过opacity和transform过渡控制显隐与浮起效果。
只在 hover 时显示底部渐隐阴影，用 ::after 伪元素是最干净、可控的方式。关键是把阴影层定位在元素底部，用线性渐变模拟“从实到透明”的过渡效果，并确保它只在悬停时出现。
1. 基础结构：给目标元素设相对定位
伪元素默认相对于父元素定位，所以必须先让目标标签（比如 button 或 div）有 position: relative，否则 ::after 可能脱离预期位置。
- 不加
position: relative→::after可能按 body 或最近定位祖先定位，容易偏移 - 推荐写法：
position: relative; z-index: 1;（z-index防止阴影被其他内容遮挡）
2. 用 ::after 绘制底部阴影层
阴影层本质是一个宽高适配的矩形，覆盖在元素正下方，用 background: linear-gradient() 实现从深灰（或黑）到透明的垂直渐变。
- 高度建议 12–24px（太矮不明显，太高显笨重）
- 宽度设为
100%，left: 0对齐左边缘 - 用
transform: translateY(0)起始位置，hover 时改为translateY(4px)让它“浮起”一点，更自然 - 示例样式：
.card:hover::after {
content: '';
position: absolute;
left: 0;
bottom: -12px; /* 阴影从底部边缘开始向下延伸 */
width: 100%;
height: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
z-index: -1;
opacity: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.card::after {
content: '';
position: absolute;
left: 0;
bottom: -12px;
width: 100%;
height: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
z-index: -1;
opacity: 0;
}3. 控制显示时机与动效
不要用 display: none/block 切换 —— 它无法过渡。统一用 opacity + transition 实现淡入淡出，再配合 transform 微调位置，视觉更轻盈。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
opacity: 0，且可加transform: translateY(4px)让它“藏”在更下方 - hover 状态：
opacity: 1+transform: translateY(0) - transition 推荐写全：
transition: opacity 0.25s ease, transform 0.25s ease;
4. 注意细节避坑
常见问题基本都出在定位和层级上：
- 阴影没出现？检查父元素是否漏了
position: relative - 阴影错位？确认
bottom值是负数（如-12px），表示从底边往下偏移 - 阴影被盖住？给伪元素设
z-index: -1，同时确保父元素z-index≥ 1 - 想适配圆角卡片？给
::after加border-radius: 0 0 8px 8px匹配底部弧度
基本上就这些。核心就是：相对定位打底 + 伪元素画渐变层 + opacity 控显隐 + transform 增细节。不复杂但容易忽略定位和 z-index，调通一次，以后直接复用。
