css中box-shadow方法如何使用

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. 内阴影

.box {
  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 简单但很实用，合理使用能显著提升界面质感。