CSS 阴影生成器:轻松实现盒阴影和文字阴影

2026年3月31日 · 12分钟阅读

理解 CSS 阴影

您是否注意到有些网页元素似乎从屏幕上"跳出来",而其他元素则显得平淡无生气?这种视觉魔力通常归功于一个强大的 CSS 功能:阴影。它们为按钮、卡片和标题等元素增添了一丝深度,将二维界面转变为有形且可交互的东西。

CSS 阴影不仅仅是装饰性点缀。它们在现代网页设计中发挥着关键的功能作用。阴影创建视觉层次、引导用户注意力、指示交互性,并在元素之间建立空间关系。当按钮有细微阴影时,用户本能地理解它是可点击的。当鼠标悬停时阴影发生变化,就确认了该元素是可交互的。

阴影背后的心理学根植于我们如何感知物理世界。在现实生活中,物体根据其与表面的距离和光源投射阴影。通过在网页设计中模仿这些自然现象,我们创建了感觉熟悉和直观的界面。带有柔和阴影的卡片看起来漂浮在页面上方,而带有内阴影的按下按钮看起来凹陷到表面中。

CSS 提供两个主要的阴影属性:box-shadow 用于元素容器,text-shadow 用于排版。虽然它们共享相似的语法模式,但各自服务于不同的目的并提供独特的创意可能性。理解两者可以让您打造提升整个设计系统的精致视觉效果。

盒阴影:基础知识和语法

盒阴影是 CSS 深度效果的主力军。它们应用于元素的整个盒模型,为按钮、卡片、图像、容器和几乎任何 HTML 元素创建阴影。box-shadow 属性非常灵活,支持从细微的高度提示到戏剧性的光照效果的一切。

以下是盒阴影的完整语法:

element {
  box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
}

让我们详细分解每个组成部分:

以下是带有细微高度阴影的现代按钮的实际示例:

.button-primary {
  background: #6366f1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.button-primary:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

这创建了一个看起来从页面略微抬起的按钮。悬停时,阴影变得更大更柔和,创造出按钮正在向用户靠近的错觉。这种细微的交互提供了元素可交互的即时视觉反馈。

理解偏移值

偏移值(offset-x 和 offset-y)决定阴影相对于元素出现的位置。这些值模拟光源的位置:

• 正 offset-x: 阴影出现在右侧(光源来自左侧)
• 负 offset-x: 阴影出现在左侧(光源来自右侧)
• 正 offset-y: 阴影出现在下方(光源来自上方)
• 负 offset-y: 阴影出现在上方(光源来自下方)
• 两者都为零: 阴影均匀地出现在元素周围(居中光源)

大多数看起来自然的阴影使用正 offset-y 值,因为我们习惯于物理世界中光线从上方照射。常见模式是 0 2px 用于细微高度或 0 8px 用于更明显的深度。

模糊半径和扩展半径

模糊半径控制阴影柔和度。值为 0 创建硬边阴影,而较大的值创建越来越柔和、扩散的阴影。对于大多数 UI 元素,4px 到 20px 之间的模糊值效果很好。

扩展半径经常被误解。它在应用模糊之前扩展或收缩阴影。正扩展使阴影大于元素,而负扩展使其更小。这对于创建不像元素本身延伸那么远的阴影很有用。

高级盒阴影技巧

一旦掌握了基本的盒阴影,您就可以探索创建精致视觉效果的高级技术。这些方法被领先的设计系统和现代网络应用程序用来实现精致、专业的界面。

分层阴影实现逼真深度

现实世界的阴影并不均匀。它们既有锐利的部分也有柔和的部分。您可以通过用逗号分隔在单个元素上堆叠多个阴影:

.card-elevated {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.card-floating {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.10);
}

这种由 Material Design 推广的技术通过结合较大、较柔和的阴影和较小、较锐利的阴影来创建更逼真的阴影。结果模仿了光在物理世界中的行为方式,其中阴影既有本影(暗核)又有半影(柔和边缘)。

内阴影实现深度和纹理

inset 关键字将阴影翻转为出现在元素内部而不是外部。这创造了深度、凹陷或纹理的外观:

.input-field {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 10px 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.pressed-button {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

内阴影非常适合表单输入,给它们一种细微的凹陷外观,暗示它们"雕刻在"页面中。它们也非常适合活动/按下按钮状态,创建触觉反馈。

彩色阴影强化品牌识别

谁说阴影必须是黑色或灰色?彩色阴影可以强化品牌识别并创建独特的视觉风格:

.brand-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
}

.success-button {
  background: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

在低不透明度下使用品牌颜色的阴影可以创建有凝聚力、令人难忘的设计。这种技术对于行动号召按钮和特色内容卡片特别有效。

新拟态和柔和 UI

新拟态创建看起来从背景挤出或凹入的界面。这需要结合明暗阴影:

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    9px 9px 16px rgba(163, 177, 198, 0.6),
    -9px -9px 16px rgba(255, 255, 255, 0.5);
}

虽然新拟态曾经流行一时,但要谨慎使用。由于对比度低,它可能会造成无障碍访问问题,最适合装饰元素而不是关键 UI 组件。

文字阴影详解

文字阴影专门应用于文本内容,为排版创建深度、强调或装饰效果。text-shadow 属性使用比盒阴影更简单的语法,但提供同样强大的创意可能性。

以下是基本语法:

element {
  text-shadow: offset-x offset-y blur-radius color;
}

请注意,文字阴影不包括扩展半径或 inset 关键字。该属性专注于三个关键值:

以下是英雄标题的实际示例:

h1.hero-title {
  font-size: 48px;
  font-weigh