如何在CSS中设置盒模型圆角阴影组合_border-radius box-shadow效果

通过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 的父容器设置大阴影，可能导致阴影被裁剪
• 若元素本身有背景色或边框，圆角会自然影响整体视觉
• 在移动端保持阴影适度，避免过度渲染影响性能

基本上就这些。掌握好圆角与阴影的搭配，能让界面看起来更现代、柔和。不复杂但容易忽略细节。