答案：通过border-radius设置圆角，box-shadow添加阴影，二者结合可创建美观的卡片布局。示例中.card使用12px圆角和0 4px 12px rgba(0,0,0,0.1)阴影，并在hover时增强阴影以提升交互体验。
实现卡片阴影和圆角效果主要依靠 CSS 的 box-shadow 和 border-radius 属性。这两个属性配合使用，可以轻松打造现代、美观的卡片式布局。
1. 设置圆角边框（border-radius）
通过 border-radius 可以让卡片四角变得圆润，常见值有像素值或百分比。
• 使用固定像素值：适合大多数场景，如 8px、12px• 使用百分比：适合圆形或接近正方形的元素，如头像卡片
• 四个角分别设置：可自定义每个角的弧度，例如 border-radius: 8px 16px 8px 0;
示例：
.card {
border-radius: 12px;
}
2. 添加阴影效果（box-shadow）
box-shadow 能为卡片增加立体感，常用参数包括水平偏移、垂直偏移、模糊半径、扩散半径和颜色。
• 常见浅色阴影：0 4px 12px rgba(0,0,0,0.1)• 多层阴影可增强层次感，用逗号分隔多个阴影值
• 阴影颜色推荐使用透明度较低的黑色或主题色，避免过于突兀
示例：
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
3. 完整卡片样式示例
结合背景色、内边距等属性，构建完整卡片：
.card {
width: 300px;
padding: 16px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease; /* 鼠标悬停时平滑过渡 */
}
<p>.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}</p>
hover 效果能提升交互体验，让用户感知卡片可点击或可操作。
基本上就这些。合理调整圆角和阴影参数，就能适配多数设计需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
