答案：通过box-shadow设置卡片阴影并结合transition实现平滑悬停动画。首先创建带标题和描述的div卡片，用CSS定义宽高、圆角和基础阴影；box-shadow参数包括水平垂直偏移、模糊与扩散半径及rgba颜色；然后添加:hover状态加深阴影模拟浮起效果；接着在.card类中加入transition: box-shadow 0.3s ease，使阴影变化柔和；可扩展为transition: all并配合transform: translateY(-5px)增强立体感；最后建议使用rgba避免生硬、保持初始轻微阴影、控制过渡时间在0.2~0.4秒，并注意移动端性能。
在CSS初级项目中，卡片阴影效果是提升界面视觉层次感的常用技巧。通过 box-shadow 添加立体感，再结合 transition 实现平滑动画，能让用户交互更自然。下面教你一步步实现这个效果。
1. 基础卡片结构与box-shadow
先创建一个简单的HTML卡片容器：
<div class="card"> <h3>标题</h3> <p>这是一段描述内容。</p> </div>
然后用CSS设置基础样式和阴影：
.card {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 50px auto;
}
box-shadow 的参数含义：
立即学习“前端免费学习笔记（深入）”；
- 第一个值：水平偏移（正右负左）
- 第二个值：垂直偏移（正下负上）
- 第三个值：模糊半径（越大越虚）
- 第四个值：扩散半径（可选，默认为0）
- 颜色：通常用rgba控制透明度
2. 添加hover状态增强交互
当鼠标悬停时加深阴影，模拟“抬起”效果：
.card:hover {
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
这个变化让卡片看起来像是从页面“浮起”，但直接切换会显得生硬。
3. 使用transition实现平滑过渡
加入 transition 让阴影变化更柔和：
.card {
/* 其他样式不变 */
transition: box-shadow 0.3s ease;
}
这样在鼠标移入移出时，阴影会缓慢变化，视觉更舒适。
你也可以同时过渡多个属性：
.card {
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
配合 transform 能进一步增强立体感。
4. 实用小技巧
避免常见问题，让效果更专业：
- 使用 rgba 而不是黑色，阴影更自然
- 轻微的初始阴影比无阴影更有质感
- transition时间建议在0.2s~0.4s之间
- 移动端注意不要过度使用，避免卡顿
基本上就这些。box-shadow 和 transition 结合简单却很有效，适合新手快速提升页面表现力。不复杂但容易忽略细节。
