box-shadow属性可为元素添加立体阴影效果，基本语法为：h-offset v-offset blur spread color inset；通过设置水平垂直偏移、模糊与扩展半径、颜色及内外阴影，实现基础外阴影、内阴影、多重阴影等效果；推荐使用rgba色值和适度模糊，避免纯黑阴影，兼顾美观与性能。

CSS 的 box-shadow 属性可以为元素添加阴影效果，让页面更具立体感和视觉层次。使用它并不复杂，只需掌握语法结构和参数含义即可灵活运用。

box-shadow 基本语法

box-shadow 的基本写法如下：

box-shadow: h-offset v-offset blur spread color inset;

这些参数的含义分别是：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• h-offset：水平偏移值，正数向右，负数向左
• v-offset：垂直偏移值，正数向下，负数向上
• blur：模糊半径，值越大越模糊，不可为负
• spread：扩展半径，正数扩大阴影，负数缩小
• color：阴影颜色，支持任何 CSS 颜色格式
• inset（可选）：加上后阴影变为内阴影，默认是外阴影

常见用法示例

通过调整参数，可以实现多种常见的阴影效果。

立即学习“前端免费学习笔记（深入）”；

• 基础外阴影：
  box-shadow: 2px 4px 6px rgba(0,0,0,0.3);
• 柔和长投影：
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
• 内阴影效果：
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
• 多重阴影（用逗号分隔）：
  box-shadow: 0 4px 8px rgba(0,0,0,0.1),
  0 2px 4px rgba(0,0,0,0.2);

实用技巧与注意事项

想要做出自然美观的阴影，注意以下几点会更有效果。

• 推荐使用 rgba 颜色，透明度让阴影更柔和真实
• 避免纯黑色阴影（#000），容易显得生硬，建议用深灰并降低透明度
• 大模糊搭配小偏移适合“浮起”效果，常用于卡片组件
• 移动端注意性能，过度复杂的阴影可能影响渲染流畅度
• box-shadow 不影响布局，不会像 margin 那样占用空间

基本上就这些。合理使用 box-shadow 能显著提升界面质感，关键在于控制好模糊和透明度，让阴影看起来自然不突兀。