答案：通过结合 box-shadow 和 border-radius 可创建圆角卡片的立体阴影效果，box-shadow 默认在 border 外显示并随圆角平滑过渡，需避免父容器 overflow: hidden 裁剪阴影；使用多层阴影可增强层次感，如 0 2px 8px 与 0 8px 24px 叠加模拟真实光照，适用于 Material Design 风格；注意在高分辨率屏增加模糊值、移动端减弱强度以优化视觉平衡。
在CSS中，通过结合 box-shadow 和 border-radius，可以为卡片元素创建出自然、立体的阴影效果，同时保持圆角边缘的平滑过渡。这种组合广泛应用于现代网页设计中的卡片布局，如产品展示、用户信息卡等。
理解盒模型与阴影的关系
盒子模型是每个HTML元素的基础结构，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。当使用 box-shadow 时，阴影会默认绘制在 border 区域之外，受元素整体形状影响。而 border-radius 设置了元素的圆角，阴影也会随之呈现圆角形态，前提是阴影没有被裁剪或设置为内阴影（inset）。
注意：如果父容器设置了 overflow: hidden，可能会意外裁剪掉阴影部分，需合理设置父级容器的 padding 或使用伪元素规避。
基础语法与结合使用
要实现带圆角的卡片阴影，关键在于正确配置 box-shadow 的参数，并确保 border-radius 已应用。
立即学习“前端免费学习笔记（深入）”；
box-shadow 语法：
- h-offset：水平偏移，正值向右，负值向左
- v-offset：垂直偏移，正值向下，负值向上
- blur：模糊半径，值越大越柔和
- spread：扩展半径，正值扩大阴影，负值缩小
- color：阴影颜色，建议使用 rgba 提升透明感
示例代码：
.card {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 12px; /* 圆角 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
margin: 20px;
}
此时，阴影会自然贴合圆角边缘，形成一体化的浮雕感。
增强视觉层次的多层阴影
为了模拟更真实的光照效果，可以使用多组 box-shadow 值，叠加不同偏移与模糊度的阴影。
常见技巧：
- 一层近处的浅色模糊阴影，模拟底部接触光
- 一层稍远的深色阴影，增强立体感
示例：
.card {
border-radius: 16px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.12);
}
这种叠加方式让卡片看起来“浮”在页面上，尤其适合 Material Design 风格的设计。
避免常见问题
使用过程中需注意以下几点以保证效果正常：
- 确保没有设置
overflow: hidden导致阴影被截断 - 避免在内阴影（inset）中过度使用，否则会削弱立体感
- 在高分辨率屏幕下，适当增加 blur 值使阴影更自然
- 移动端可减小 shadow 强度，避免视觉过重
基本上就这些。只要掌握好 border-radius 与 box-shadow 的配合，就能轻松做出美观且专业的卡片组件。不复杂但容易忽略细节。
