css3盒子阴影的基础语法
css3中实现盒子阴影效果的核心属性是box-shadow，该属性可以为元素添加一个或多个阴影，语法格式如下：
/* 基础语法 */ box-shadow: h-shadow v-shadow blur spread color inset;
各参数的具体含义如下：
- h-shadow：必需参数，表示水平阴影的位置，允许负值，正值阴影向右偏移，负值向左偏移
- v-shadow：必需参数，表示垂直阴影的位置，允许负值，正值阴影向下偏移，负值向上偏移
- spread：可选参数，表示阴影的扩展半径，正值阴影扩大，负值阴影缩小
- color：可选参数，表示阴影的颜色，支持所有css颜色值
- inset：可选参数，添加该关键字后阴影会变成内阴影，不添加则为外阴影
基础外阴影实现示例
下面是一个最简单的外阴影实现案例，为普通的div盒子添加基础阴影效果：
/* 基础外阴影样式 */
.shadow-box {
width: 200px;
height: 120px;
background-color: #f5f5f5;
/* 水平偏移10px，垂直偏移10px，模糊半径15px，扩展半径0，灰色阴影 */
box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
}
<div class="shadow-box">基础外阴影效果</div>
内阴影实现示例
如果需要实现内阴影效果，只需要在box-shadow属性值中添加inset关键字即可：
/* 内阴影样式 */
.inner-shadow-box {
width: 200px;
height: 120px;
background-color: #f5f5f5;
/* 内阴影，水平偏移5px，垂直偏移5px，模糊半径10px，黑色半透明阴影 */
box-shadow: inset 5px 5px 10px 0 rgba(0, 0, 0, 0.2);
}
<div class="inner-shadow-box">内阴影效果</div>
多重阴影实现示例
box-shadow属性支持同时设置多个阴影，多个阴影之间用逗号分隔即可，常用于实现更丰富的视觉效果：
/* 多重阴影样式 */
.multi-shadow-box {
width: 200px;
height: 120px;
background-color: #f5f5f5;
/* 两个阴影，一个浅灰色外阴影，一个深灰色内阴影 */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
<div class="multi-shadow-box">多重阴影效果</div>
常见阴影效果参数参考
实际开发中可以根据需求调整参数，以下是几种常见场景的阴影参数参考：
| 效果场景 | box-shadow参数示例 | 说明 |
|---|---|---|
| 轻微悬浮阴影 | 0 2px 12px 0 rgba(0,0,0,0.1) | 适合卡片类元素的悬浮效果，阴影柔和 |
| 立体凸起阴影 | 5px 5px 10px 0 rgba(0,0,0,0.2) | 阴影向右下偏移，模拟元素凸起效果 |
| 柔和扩散阴影 | 0 0 20px 5px rgba(64,158,255,0.3) | 模糊半径和扩展半径较大，适合强调元素 |
| 内凹阴影 | inset 0 2px 10px 0 rgba(0,0,0,0.15) | 内阴影效果，模拟元素内凹的视觉感受 |
注意事项
- 阴影不占用文档流空间，不会影响其他元素的布局位置
- 如果元素设置了
border-radius圆角属性，阴影也会跟随元素的圆角形状呈现 - 阴影颜色建议使用rgba格式，通过调整透明度可以让阴影效果更自然，避免生硬的纯色阴影
- 过多或者过大的阴影会增加浏览器的渲染成本，实际开发中需要合理控制阴影的范围和数量
css3box_shadow盒子阴影阴影效果修改时间：2026-06-30 22:57:15