CSS 中的 box-shadow 阴影效果

FreeGuideOnline 最新 2026-07-07

box-shadow 属性完全指南

box-shadow 是 CSS 中为元素添加阴影效果的核心属性。它可以让界面元素产生立体感、层次感，甚至实现一些创意视觉效果。本文将从零开始，逐步拆解每一个参数，并通过大量实例带你彻底掌握它。

基本语法

box-shadow 属性的完整语法如下：

box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] [color];

inset（可选）：如果写上这个关键字，阴影将从外阴影变为内阴影。
offset-x（必需）：水平偏移量。正值向右，负值向左。
offset-y（必需）：垂直偏移量。正值向下，负值向上。
blur-radius（可选）：模糊半径，数值越大阴影越模糊，默认为0（边缘清晰）。
spread-radius（可选）：扩展半径，正值让阴影扩大，负值让阴影缩小。
color（可选）：阴影颜色，可以使用任何 CSS 颜色值。在大多数浏览器中，如果省略颜色，会使用当前文字颜色（currentColor），但规范建议始终明确指定颜色以保持一致性。

一个最简单的外阴影写法：

.shadow-basic {
  box-shadow: 10px 10px 5px #888888;
}

这表示阴影向右偏移 10px，向下偏移 10px，模糊半径为 5px，颜色为灰色。

参数详解与演示

偏移量（offset-x & offset-y）

偏移量决定了光源的方向。想象有一盏灯从左上方照射，那么阴影就应该出现在右下方。

/* 阴影在右下 */
.shadow-bottom-right {
  box-shadow: 8px 8px 0 #ccc;
}

/* 阴影在左上（负偏移） */
.shadow-top-left {
  box-shadow: -8px -8px 0 #ccc;
}

实践技巧：对于拟物化按钮，常用向下的阴影表示未按下状态，而按下时则改用内阴影且偏移值很小。

模糊半径（blur-radius）

模糊半径越大，阴影的边缘就越柔和。值为 0 时，阴影边缘和元素边界一样锐利。

/* 没有模糊的硬朗阴影 */
.sharp-shadow {
  box-shadow: 6px 6px 0 0 #333;
}

/* 柔和的大片阴影 */
.soft-shadow {
  box-shadow: 6px 6px 15px 0 #333;
}

注意：模糊半径不能为负值。

扩展半径（spread-radius）

这是很多初学者容易忽略的参数。它可以在不改变偏移量的情况下，整体放大或缩小阴影的尺寸。

正值：阴影向四周膨胀，比元素本身更大。
负值：阴影向内部收缩，比元素本身更小。

/* 阴影比元素大一圈，常用于发光效果 */
.glow {
  box-shadow: 0 0 10px 5px #00f;
}

/* 阴影只在元素内部一部分显现，常用于描边 */
.outline-effect {
  box-shadow: 0 0 0 3px #f00;
}

利用负扩展半径可以实现仅在一侧显示阴影的效果：

.side-shadow {
  box-shadow: 0 5px 4px -4px black;
}

内阴影（inset）

加上 inset 关键字，阴影会绘制在元素边框内部，背景之上。这让元素看起来像是被压进去的。

.inset-shadow {
  background: #e0e0e0;
  box-shadow: inset 2px 2px 5px #aaa;
}

/* 常见于输入框的凹陷效果 */
input:focus {
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

注意：inset 必须写在声明的最前面或最后面，但不能写在中间。推荐统一写在最前面。

多重阴影

一个元素可以同时拥有多个阴影，只需用逗号分隔即可。这是 box-shadow 非常强大的特性。

阴影的层级顺序是先写的阴影在最上层。后面的阴影会依次叠加在先写的阴影之下。

.multi-shadow {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),  /* 最近的一层 */
    0 10px 20px rgba(0,0,0,0.19); /* 更远更模糊的一层 */
}

利用多重阴影，可以模拟现实中物体投射出的多层柔和阴影，实现现代化的“弥散阴影”效果。

经典卡片阴影代码：

.card {
  box-shadow:
    0 2.8px 2.2px rgba(0,0,0,0.034),
    0 6.7px 5.3px rgba(0,0,0,0.048),
    0 12.5px 10px rgba(0,0,0,0.06),
    0 22.3px 17.9px rgba(0,0,0,0.072),
    0 41.8px 33.4px rgba(0,0,0,0.086),
    0 100px 80px rgba(0,0,0,0.12);
}

你也可以混合外阴影和内阴影：

.mixed-shadow {
  box-shadow:
    0 5px 10px rgba(0,0,0,0.15),
    inset 0 2px 5px white;
}

常见实用场景

简约卡片与高程

拟物按钮

.button {
  background: #e0e0e0;
  border-radius: 8px;
  box-shadow:
    5px 5px 10px #bebebe,
    -5px -5px 10px #ffffff;
}

.button:active {
  box-shadow:
    inset 5px 5px 10px #bebebe,
    inset -5px -5px 10px #ffffff;
}

边框模拟

因为 spread-radius 可以让阴影像边框一样贴合元素，且不占用布局空间，所以可以替代 border 或 outline。

.border-shadow {
  box-shadow: 0 0 0 2px #3b82f6;
}

这对于避免边框增加元素尺寸的问题非常有用。

发光与霓虹灯效果

.neon-text {
  color: #fff;
  text-shadow: 0 0 7px #fff, 0 0 10px #f09, 0 0 21px #f09; /* 文字发光不是box-shadow，但思路通用 */
}

.neon-box {
  box-shadow:
    0 0 5px #fff,
    0 0 20px #0fa,
    0 0 40px #0fa;
}

单侧阴影

借助负的扩展半径和偏移，可以让阴影只出现在下方。

.shadow-bottom-only {
  box-shadow: 0 8px 6px -6px black;
}

性能与最佳实践

阴影成本：模糊半径和扩展半径都会消耗一定的渲染性能。在大量元素（如长列表）上使用重阴影可能会导致滚动卡顿。
优化手段：尽量使用多层小模糊来模拟大而柔和的阴影，而不是单层超大的模糊半径。使用 will-change: box-shadow; 提醒浏览器提前优化即将发生阴影动画的元素。
颜色选择：永远不要使用纯黑色作为阴影颜色，这会显得非常生硬。使用半透明的黑色或基于背景色调的深色调。例如 rgba(0,0,0,0.1) 到 rgba(0,0,0,0.2)。
可访问性：不要仅用阴影来传达重要的状态信息，比如聚焦指示。最好结合 outline 或明显的颜色变化，确保高对比度模式下依然可见。

浏览器兼容性

box-shadow 属性兼容性极佳，所有现代浏览器均完全支持。IE9 及以上版本也提供了基础支持（不支持 inset 和扩展半径在旧版 IE 中可能有坑，但基本可以放心使用）。

你可以在 Can I use 上查看最新的支持详情。

总结

box-shadow 远不止是“加个阴影”这么简单。通过精确控制偏移、模糊、扩展以及巧妙使用多重阴影和 inset，你可以创造出丰富的界面深度和视觉质感。现在就打开你的编辑器，开始尝试用代码“画”出物体的光影吧。