外阴影和内阴影介绍

在前端页面设计中，阴影是非常常见的视觉效果。它可以让元素看起来更有层次感，也可以用来表达悬浮、按压、凹陷、卡片、按钮等状态。

CSS 中最常用的阴影属性是 box-shadow。它既可以实现外阴影，也可以实现内阴影。

#一、什么是外阴影

外阴影指的是元素外部的阴影效果。

它会出现在元素边框之外，让元素看起来像是从页面中“浮起来”了一样。常见的卡片、弹窗、按钮悬浮效果，基本都会用到外阴影。

例如：

复制.card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

这个阴影表示：元素下方有一层柔和的黑色阴影，让卡片看起来更有立体感。

外阴影的核心感觉是：元素凸出来、浮起来、有空间层级。

#二、什么是内阴影

内阴影指的是元素内部的阴影效果。

它不会出现在元素外部，而是出现在元素内容区域的边缘内部。它通常用于模拟凹陷、压下去、输入框内侧阴影、容器内部深度等效果。

内阴影需要使用 inset 关键字。

例如：

复制.input {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.16);
}

这个阴影表示：阴影出现在元素内部，并且更靠近上方，看起来像输入框内部有一点凹陷感。

内阴影的核心感觉是：元素凹进去、被压下去、有内侧深度。

#三、box-shadow 的基本语法

box-shadow 的基本语法如下：

复制box-shadow: x偏移 y偏移 模糊半径 扩散半径 颜色;

也可以加上 inset：

复制box-shadow: inset x偏移 y偏移 模糊半径 扩散半径 颜色;

其中每个参数的含义如下：

复制box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);

第一个值是 x 轴偏移：

复制0

表示阴影在水平方向上的位置。正数向右，负数向左。

第二个值是 y 轴偏移：

复制8px

表示阴影在垂直方向上的位置。正数向下，负数向上。

第三个值是模糊半径：

复制24px

表示阴影的模糊程度。数值越大，阴影越柔和、扩散越明显。

第四个值是扩散半径：

复制0

表示阴影的大小扩张或收缩。正数会让阴影变大，负数会让阴影变小。

最后一个值是颜色：

复制rgba(0, 0, 0, 0.12)

通常使用半透明黑色，也可以使用带颜色的阴影。

#四、外阴影示例

#1. 普通卡片阴影

复制.card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

这种阴影适合用于普通卡片，让卡片和背景分离。

#2. 更轻的阴影

复制.card-light {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

这种阴影更加柔和，适合简洁、干净的 UI 风格。

#3. 悬浮状态阴影

复制.card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

当鼠标悬浮时，元素稍微向上移动，同时阴影变大。这样会让用户感觉这个元素被“抬起来”了。

#五、内阴影示例

#1. 输入框内阴影

复制.input {
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

这种效果可以让输入框看起来有一点凹陷感。

#2. 按钮按下效果

复制.button:active {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

按钮按下时加上内阴影，会让按钮看起来像真的被压下去了。

#3. 容器内部深度

复制.panel {
  background: #f5f5f5;
  border-radius: 16px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.08);
}

这种写法可以让容器内部有一种轻微的包裹感。

#六、外阴影和内阴影的区别

外阴影使用普通的 box-shadow，阴影出现在元素外部。

复制box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

内阴影需要加 inset，阴影出现在元素内部。

复制box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.16);

外阴影通常表达的是“浮起”和“层级”。

内阴影通常表达的是“凹陷”和“按压”。

所以，卡片、弹窗、悬浮按钮更适合使用外阴影；输入框、按压按钮、凹陷容器更适合使用内阴影。

#七、多个阴影叠加

box-shadow 可以同时写多个阴影，用逗号分隔。

例如：

复制.card {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.12);
}

这种写法可以让阴影更自然。第一层阴影负责近处的细节，第二层阴影负责远处的扩散。

也可以同时使用外阴影和内阴影：

复制.button {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

这个按钮既有外部浮起感，又有内部高光细节。

#八、阴影参数怎么调

调阴影时，可以按照下面的思路理解：

如果想让元素更“贴近页面”，就减小 y 偏移和模糊半径。

复制box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

如果想让元素更“浮起来”，就增大 y 偏移和模糊半径。

复制box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);

如果阴影太脏，可以降低透明度。

复制box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

如果阴影太淡，可以稍微增加透明度。

复制box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

一般来说，现代 UI 的阴影不适合太黑、太硬。更推荐使用低透明度、大模糊半径的柔和阴影。

#九、常见错误

#1. 阴影太黑

复制box-shadow: 0 8px 16px #000;

这种阴影会显得很重，页面容易变脏。

更推荐：

复制box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

#2. 阴影太硬

复制box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);

模糊半径太小，透明度又太高，会让阴影看起来很生硬。

更推荐：

复制box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

#3. 不考虑背景颜色

阴影不是孤立存在的，它会受到背景颜色影响。

在浅色背景下，可以使用黑色半透明阴影：

复制box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

在深色背景下，黑色阴影通常不明显，可以使用浅色高光或者更微妙的边框：

复制box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);

#十、UnoCSS / Tailwind 中的阴影

如果使用 UnoCSS 或 Tailwind，可以直接使用内置的阴影类。

例如：

复制<div class="shadow-md rounded-xl bg-white"></div>

常见阴影类有：

复制shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl

如果需要内阴影，可以使用：

复制<div class="shadow-inner"></div>

如果需要自定义阴影，也可以写任意值：

复制<div class="shadow-[0_8px_24px_rgba(0,0,0,0.12)]"></div>

内阴影自定义写法：

复制<div class="shadow-[inset_0_2px_6px_rgba(0,0,0,0.16)]"></div>

#十一、实战建议

外阴影适合用在卡片、弹窗、下拉菜单、悬浮按钮、顶部导航等地方。

内阴影适合用在输入框、按压按钮、凹陷面板、游戏 UI 的槽位、装备栏、背包格子等地方。

如果是普通后台管理系统，阴影应该轻一点，不要太夸张。

如果是游戏 UI，可以适当加重内阴影和描边，让按钮、面板、背包格子更有质感。

如果是极简风页面，可以少用阴影，多用边框、背景色层级和间距表达关系。

#十二、总结

外阴影和内阴影都由 box-shadow 实现。

普通 box-shadow 是外阴影，表示元素向外投射阴影，常用于表现浮起和层级。

加上 inset 后就是内阴影，表示阴影出现在元素内部，常用于表现凹陷和按压。

写阴影时，不要只想着“加一层黑色”，而要考虑它表达的状态：是浮起来，还是凹进去；是轻微层级，还是强烈悬浮；是现代 UI，还是游戏 UI。

一个好看的阴影，通常不是很黑，而是柔和、克制、有方向感。