使用border-radius和box-shadow可创建现代卡片效果：1. 搭建.card容器；2. 设置border-radius实现圆角；3. 添加box-shadow增强层次；4. 结合hover与transition提升交互。
在CSS初级项目中，卡片样式是网页设计的常见需求，比如用于展示产品、用户信息或文章摘要。通过 box-shadow 和 border-radius 的组合使用，可以快速让元素看起来更现代、有层次感。下面介绍如何一步步实现美观的卡片效果。
1. 基础卡片结构
先搭建一个简单的HTML结构，作为卡片容器：
卡片标题
这里是卡片内容，可以是文字、图片或其他元素。
这个 div 就是我们要美化的“卡片”。
立即学习“前端免费学习笔记（深入）”；
2. 使用 border-radius 圆角边框
圆角能让卡片看起来更柔和、友好。设置 border-radius 即可实现：
.card {border-radius: 12px;
}
数值可以根据需要调整，8px 到 16px 是常用范围。也可以分别设置四个角，例如：
border-radius: 8px 8px 0 0; /* 只有顶部圆角 */
3. 添加 box-shadow 实现阴影效果
阴影能增强卡片的立体感和视觉层次。基础写法如下：
.card {box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
参数说明：
- 0：水平偏移（无偏移）
- 4px：垂直偏移（向下4px）
- 8px：模糊半径（越大约模糊）
- rgba(0,0,0,0.1)：阴影颜色（黑色透明度10%）
这种浅色阴影适合大多数浅色背景页面。
4. 组合美化：完整卡片样式示例
将以上技巧结合，并添加一些基础样式，让卡片更完整：
.card {width: 300px;
padding: 20px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
这里还加入了 transition 和 :hover 效果，鼠标悬停时阴影加深，提升交互体验。
基本上就这些。不复杂但容易忽略细节。掌握好 border-radius 和 box-shadow 的搭配，能让初级项目看起来专业不少。
