通过border-radius和box-shadow配合实现圆角加阴影效果，1. border-radius设置圆角大小，box-shadow定义阴影偏移、模糊与颜色；2. 阴影需跟随圆角自然呈现，使用rgba半透明色及足够模糊值避免生硬；3. 可用多层阴影增强层次感，如卡片设计中近实远虚的双层投影；4. 注意避免父容器overflow:hidden裁剪阴影，兼顾移动端性能。合理搭配可提升界面现代感与立体感。
在CSS中实现圆角加阴影效果，主要依靠 border-radius 和 box-shadow 两个属性配合使用。只要合理设置参数，就能让元素拥有柔和的圆角和立体的投影，提升界面质感。
1. 基础语法与作用
border-radius 用于设置元素边框的圆角半径，值越大，圆角越明显。可以设置单个值（四角相同），也可以分别设置四个角。
box-shadow 用来添加盒子的阴影效果，控制阴影的偏移、模糊度、扩散范围和颜色。
常用写法示例：
div {
border-radius: 10px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}
2. 圆角与阴影的协调设置
当元素有圆角时，阴影也应自然跟随圆角形状，避免出现“直角阴影包住圆角”的违和感。关键在于确保 box-shadow 不被裁剪，并且模糊区域足够平滑。
立即学习“前端免费学习笔记（深入）”；
- 使用 rgba() 颜色定义阴影，让其半透明，更真实
- 适当增加模糊半径（如 8px~15px），使阴影边缘柔和
- 可添加扩散半径轻微外扩阴影，增强立体感
.card {
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
3. 多层阴影增强层次感
通过逗号分隔，可以为元素设置多个阴影，模拟更复杂的光照效果，常见于卡片式设计。
双层阴影写法：
.fancy-box {
border-radius: 16px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.1),
0 4px 16px rgba(0, 0, 0, 0.08);
}
第一层靠近元素，偏移小；第二层更远更模糊，营造空间感。
4. 注意事项与兼容性
现代浏览器均支持 border-radius 和 box-shadow，无需特殊前缀。但需注意：
- 避免给 overflow: hidden 的父容器设置大阴影，可能导致阴影被裁剪
- 若元素本身有背景色或边框，圆角会自然影响整体视觉
- 在移动端保持阴影适度，避免过度渲染影响性能
基本上就这些。掌握好圆角与阴影的搭配，能让界面看起来更现代、柔和。不复杂但容易忽略细节。
