box-shadow 是 CSS 中用于为元素添加外/内阴影效果的属性，支持水平垂直偏移、模糊、扩展、颜色及 inset 参数，可设多重阴影并配合 transition 实现动画。
box-shadow 是 CSS 中用来为元素添加阴影效果的属性，能让盒子（如 div、按钮等）看起来更立体或突出。使用方法灵活，可以设置多个阴影，并控制方向、模糊度、颜色等。
基本语法
box-shadow 的语法如下：
box-shadow: h-offset v-offset blur spread color inset;每一项的含义如下：
- h-offset：水平偏移，正值向右，负值向左
- v-offset：垂直偏移，正值向下，负值向上
- blur：模糊半径，值越大越模糊，可选
- spread：扩展半径，正值扩大阴影，负值缩小，可选
- color：阴影颜色，支持所有 CSS 颜色格式，可选
- inset：可选关键字，表示内阴影，不加则是外阴影
其中，前两个参数（h-offset 和 v-offset）是必需的，其余可省略，未设置时会使用默认值（如颜色为黑色，blur 和 spread 为0）。
立即学习“前端免费学习笔记（深入）”；
常见用法示例
以下是一些典型的使用场景：
1. 基础外阴影
.box {box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
向右下角偏移 5px，模糊 10px，颜色带透明度，显得更自然。
2. 内阴影
简单好用的立体式banner切换插件
下载
效果描述： 简单好用的立体式左右滚动banner焦点图效果 源代码没有任何图片，且CSS较为冗余，懒人站长已经做过优化，方便懒人们使用 使用方法： 1、将CSS引入到你的页面中，保证命名不冲突 2、将index.html中代码部分拷贝到你需要的地方即可
box-shadow: inset 2px 2px 5px #ccc;
}
阴影在元素内部，适合做凹陷效果，比如输入框或卡片内陷。
3. 多重阴影
.box {box-shadow: 0 0 10px red, 0 0 20px blue;
}
多个阴影用逗号分隔，前面的阴影会覆盖后面的，适合做发光或层次感效果。
4. 只有模糊无偏移的阴影（类似光晕）
.glow {box-shadow: 0 0 15px gold;
}
常用于高亮提示或焦点状态。
实用建议
使用 box-shadow 时注意以下几点：
- 推荐使用 rgba 或 hsla 颜色，让阴影更柔和自然
- 避免过大的模糊值影响性能，尤其在移动设备上
- 不要滥用多重阴影，太多会影响渲染效率
- 配合 transition 可实现阴影动画，比如悬停放大
例如添加 hover 效果：
.btn {transition: box-shadow 0.3s;
}
.btn:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
基本上就这些。box-shadow 简单但很实用，合理使用能显著提升界面质感。
