卡片通过CSS的border-radius和box-shadow可实现圆角与阴影效果，.card设置12px圆角和0 4px 8px rgba(0,0,0,0.1)阴影，hover时增强为0 8px 16px rgba(0,0,0,0.15)并上移2px，配合transition实现平滑动画，提升层次与交互感。
卡片阴影与圆角是网页设计中常见的视觉效果，能让内容区域更立体、美观。使用 CSS 可以轻松实现圆角边框（border-radius）和阴影（box-shadow）的结合，让卡片看起来更有层次感。
基本结构：HTML 卡片容器
先创建一个简单的卡片结构：
这里是卡片内容
添加圆角与阴影样式
通过 border-radius 设置圆角，box-shadow 添加阴影，两者可同时作用于元素。
立即学习“前端免费学习笔记（深入）”；
示例 CSS：
.card {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
优化阴影层次感
想要更自然的阴影效果，可以使用多层阴影或调整偏移值。
推荐设置：
- 轻微垂直偏移（如 4px）
- 适当模糊半径（8px–16px）
- 透明黑色（rgba 或 hsla）避免颜色生硬
- 配合 hover 效果增强交互感
带悬停抬升效果的增强版：
.card {width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
圆角和阴影结合的关键是确保 border-radius 和 box-shadow 协同工作，浏览器会自动让阴影也呈现圆角轮廓。基本上就这些，不复杂但容易忽略细节。
