css制作卡片阴影悬浮效果
先通过CSS的box-shadow和:hover实现卡片悬浮效果，具体为设置初始阴影及过渡动画，悬停时增强阴影并可选添加位移，使卡片产生浮起感。
-shadow和:hover实现卡片悬浮效果，具体为设置初始阴影及过渡动画，悬停时增强阴影并可选添加位移，使卡片产生浮起感。想要实现卡片在鼠标悬停时出现阴影的悬浮效果，可以通过 CSS 的 box-shadow 和 :hover 伪类来完成。下面是一个简单实用的示例，帮助你快速上手。
基础卡片结构
先构建一个简单的 HTML 卡片结构：
卡片标题
这里是卡片内容，可以是文字、图片等。
默认样式设置
给卡片设置基本样式，包括圆角、背景色、过渡动画等：
.card {width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 初始轻微阴影 */
transition: box-shadow 0.3s ease; /* 平滑过渡阴影变化 */
}
添加悬浮阴影效果
当鼠标悬停时，增强阴影，制造“抬升”感：
.card:hover {box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
说明：
- 增大了垂直偏移（从 2px 到 8px）和模糊半径，让阴影更明显。
- 使用 rgba(0,0,0,0.15) 控制阴影颜色和透明度，看起来更自然。
- transition 让阴影变化更柔和，提升用户体验。
可选：配合 transform 提升悬浮感
如果想让卡片看起来真的“浮起来”，可以加上轻微位移或缩放：
.card:hover {box-shadow: 0 8px 20px rgba(0,0,0,0.15);
transform: translateY(-5px);
}
注意：加上 transform 后，建议给父容器设置 overflow: visible 防止被裁剪。
基本上就这些。不复杂但容易忽略细节，比如过渡动画和阴影层次。合理搭配 box-shadow 参数，就能做出自然的悬浮效果。
