卡片式设计通过border-radius和box-shadow实现圆角与阴影效果，.card设置12px圆角和0 4px 12px阴影并添加hover过渡，提升视觉层次与交互体验。
卡片式设计在现代网页布局中非常常见，尤其适合初学者项目，比如作品集、博客文章列表或产品展示。通过简单的 CSS 阴影与圆角技巧，就能让内容区域看起来更清晰、更具层次感。
使用 border-radius 实现圆角效果
圆角是卡片设计的基础。通过 border-radius 属性，可以将矩形元素的直角变为圆角，使视觉更柔和。
常用设置方式：
- border-radius: 8px; — 轻微圆角，适合大多数卡片
- border-radius: 12px; — 更明显的圆角，更具现代感
- border-radius: 16px; — 接近苹果风格的大圆角
- border-radius: 50%; — 完全圆形（适用于头像或图标）
示例代码：
立即学习“前端免费学习笔记（深入）”；
.card {border-radius: 12px;
}
用 box-shadow 添加阴影提升立体感
阴影能让卡片“浮”在页面上，增强视觉层次。CSS 的 box-shadow 属性是实现这一效果的关键。
语法格式：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色;
推荐几种实用阴影样式：
-
轻量阴影：适合简洁风格
box-shadow: 0 2px 8px rgba(0,0,0,0.1); -
中等浮起效果：常见于 Material Design
box-shadow: 0 4px 12px rgba(0,0,0,0.15); -
明显悬浮感：用于强调交互状态（如悬停）
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
结合 hover 效果提升互动性：
.card:hover {box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
完整卡片样式示例
将圆角与阴影结合，再搭配基础样式，即可快速构建一个美观的卡片：
.card {width: 300px;
padding: 20px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
加入 transition 可使阴影变化更自然，提升用户体验。
基本上就这些。掌握 border-radius 和 box-shadow，再稍加调整参数，就能为你的项目添加专业感十足的卡片设计。不复杂但容易忽略细节，比如颜色透明度和过渡动画，正是这些让效果更出彩。
