在网页设计中，使用 css 的 box-shadow 属性可以给元素添加投影，让界面更有立体感。这个属性适用于大多数块级元素和行内块元素，只需要写一行样式就能看到明显的阴影效果。
box-shadow 基本语法
box-shadow 的常用语法格式如下：
/* 语法：offset-x offset-y blur-radius spread-radius color */
.box {
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
}
其中各个值的含义是：
- offset-x：水平偏移，正数向右，负数向左
- offset-y：垂直偏移，正数向下，负数向上
- blur-radius：模糊半径，值越大越柔和，0 表示实边阴影
- spread-radius：扩散半径，正数阴影扩大，负数缩小
- color：阴影颜色，可用 rgba 控制透明度
实现不同阴影效果
单侧阴影
只想在底部加一条阴影，可以把水平偏移设为 0，垂直偏移设为正值：
.card {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
内阴影
使用 inset 关键字可以把外阴影改为内阴影，看起来像凹陷进去：
.inset-box {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
多重阴影
box-shadow 支持写多组值，用逗号分隔，就能叠加多个阴影：
.multi-shadow {
box-shadow: 0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
}
在 html 中使用
下面是一段完整的 html 示例，展示如何给 div 加阴影：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 200px;
height: 100px;
background: #fff;
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="box">带阴影的盒子</div>
</body>
</html>
常见注意事项
如果元素设置了 overflow: hidden，内阴影可能被裁切；另外在旧版 IE 中不支持 box-shadow，需要考虑兼容时就用边框或图片替代。掌握 offset 和 blur 的搭配，就能用 css box-shadow 轻松实现各种元素阴影效果。
cssbox-shadow元素阴影修改时间：2026-07-25 23:00:26