在现代 Web 中，阴影已经成为主要设计要素之一，甚至是随处可见。 阴影增加了质感、透视、并强调物体的尺寸。在 Web 设计中，使用光和影子可以增加物理上的真实感，并且可以用来制作丰富的、可触摸的 UI 界面。从 CSS 技术角度来说，在 Web 中给 UI 添加阴影效果有多种不同的技术方案，但从实现阴影效果的 CSS 属性来说，常见的主要有 text-shadow（文本阴影）、box-shadow（盒子阴影）和 filter的drop-shadow()（不规则阴影）。今天，我们就一起来聊聊 CSS 这方面的特性。

有关于阴影的一些基础理论

在开始聊有关于阴影方面的 CSS 属性之前，我们先来花一些时间和篇幅来聊与阴影相关的理论基础。

光和阴影

从现实生活中，我们可以轻易地发现，光可以产生阴影。也就是说，谈论阴影不可能不涉及到光。光可以控制影子的方向以及影子出现的深浅程度。简单地说，光和阴影，两者缺一不可。

光和阴影是一门复杂的学科，这已超出了我所掌握的知识领域，如果你想更深入的探究光和阴影之间的关系，可以阅读 @BCiechanowski 的《Lights and Shadows》一文。该文深入的阐述了光和阴影相关的知识！

在 Web UI 设计中，Google 的 Material Design 设计系统是有效运用光和阴影的最典型案例。我想你肯定感受到了 Material Design 中光和阴影带来的美感，因为在 Google 的产品上几乎都能看到光和阴影带来的设计美感：

Material Design 设计系统以物理世界为线索，利用光线、表面和投射的阴影在三维空间中表达 Web UI 界面。在这个设计系统中，虚拟灯光照亮了用户界面。关键的灯光创造出更清晰的，有方向性的阴影，称为 关键阴影。环境光从各个角度出现，创造出扩散的，柔和的阴影，称为环境阴影。

除了 Material Design 这种经典案例之外，光和阴影在一些新的 UI 设计中也起着关键性的作用，比如 Glassmorphism UI 和 Neumorphism UI ：

当苹果公司推出 iOS8 时，它提高了应用设计的标准，特别是在屏幕效果方面。最重要的变化之一是在整个过程中使用了模糊效果，最明显的是在控制中心；当你从屏幕的底部边缘向上滑动时，你会发现控制中心，而背景是模糊的。这种模糊（也称为磨砂效果）是以一种互动的方式发生的，因为你完全用手指的移动来控制它。

特别是在最新版本的 iOS 系统中。当用户的手按在手电筒、相机、计算器和计时器等图标上，实时模糊效果就会发生：

在这些设计中，光线仍然是一个重要的影响因素，因为它允许元素融毛主席桌面，甚至融入用户界面的其他面板。同样，在你的界面中采用这种方式也是一种设计选择。无论怎样，你都可以看到光线是如何影响深度的视觉感知的。

光源和颜色

现在我们对光和阴影之前的关系有了一个最基础的认识，接下来可以稍微再深入一点点。看看光是如何影响阴影的。我们已经看到了光的强度如何在不同的深度产生阴影。但是关于光如何影响阴影的方向和颜色，还是有很多东西可以聊的。

当光照在一个物体上时，有两种阴影出现，一种是投影（Drop Shadow 也称 Cast Shadow），另一种是形体阴影（Form Shadow）：

投影

当一个物体阻挡了光源时，就会产生水滴状阴影。阴影可以有不同的色调和值。色彩术语繁多，令人感到困惑，这里就简单地说一下色调和值。

色调是一种与灰色相混合的色相。值描述了一种颜色的整体明度或暗度。在绘画中，值是一个很大的问题，因为它是艺术家如何将光线和物体的关系转化为颜色的。

在 Web 设计软件中（比如 Sketch、Figma），有关于颜色的这些描述和定义在颜色选择器面板中可以看到：

而在 CSS 描述和定义颜色也有多种方式，如果你对这方面感兴趣的话，可以移步阅读下面这几篇有关于颜色方面的文章：

• 图解CSS: CSS 颜色
• A11Y 101：颜色对比度和Web可访问性
• JavaScript中的颜色转换
• 使用 color-mod() 函数修改颜色

形体阴影

另一方面，形体阴影是物体远离光源的一面。形体阴影比投影的边缘更柔和、更不明确。形体阴影说明了一个物体的体积和深度。

阴影的外观取决于光的方向、光的强度，以及物体和投射阴影的表面之间的距离。光线越强，影子就越暗、越清晰。光线越柔和（弱），影子就越微弱、越柔和。在某些情况下，对于定向光，我们会得到两个不同的影子。暗影（Umbra）是光线被阻挡的地方，半影（Penumbra）是光线被投下的地方。

如果一个表面靠近一个物体，影子会更清晰；反之，影子会比较模糊。这在我们生活中时常能看到：

光也可能从物体的侧面或另一表面反射出来。亮的一面会反射光线，反之暗的一面会吸收光线。

这些有关于光的概念和理论对于 Web 设计来说是非常重要，也非常有阶值的。光学背后的物理学是一个复杂的话题，上面提到的仅是一些基础性的概念。如果你想看看基于不同光源投射出的阴影的效果的话，可以浏览 @drawinghowto 绘制的一些关于光和阴影相关的漫画图:

光源的定位

阴影和光源是相辅相成的，所以，光源的位置对阴影的效果起着决定性的作用。光源位置的不同，产生阴影的效果也将不同。假如光源的位置在一个实物的上方，那么阴影将会在该实物的下方，反之，阴影将会在这个实物的上方。具体的如下图所示：

在 Web 中，一个元素就相当于是一个实物，如果这个元素的四边（甚至包括四个顶角）都有光源，那这个元素将不会有任何阴影的产生；如果这个元素只有顶部有光源，那这个元素的底部就会产生阴影：

实际上，光源可以投射在实物的任何方向（位置），只不过在同一个设计中，为了让阴影的效果保持一致，需要让页面上的所有元素产生的阴影保持一致。也就是说，一个元素的阴影与页面上其他的阴影相匹配。

立视图

阴影的最大优势可以让物体增加实质感。换句话说，阴影也可以传达海拔高度，有立视图的感觉。这个特征在 Material Design 中表现的活灵涛现，Material Design 中的设计展示了阴影是如何被用来创造元素之间可感知的分离。如下图所示：

内阴影 vs. 外阴影

就阴影而言，他可分为 外阴影 和 内阴影。在 Web UI 中内阴影相对而言是较少见的。它的参数与外阴影相同，但它出现在实物的内部，可以达到下沉的效果。

相对于外阴影来说，它并怎么流行（用得较少），主要是因为大多数的 Web UI 界面是多个面层叠在一起的。基于这个因素，外阴影相对来说更有意义，因为它提供了深度（海拔）。内阴影会暗示物体上有一个洞，就会破坏堆栈的视觉结构。

内阴影的风格使用较多的场景是在表单控件上，比如输入框（包括单选按钮和复选框等）。另外，要是你接触过 Neumorphism UI 的话，你会发现，这种风格的 UI 有一个最大的特征就是使用内阴影设计，达到一种类似挤压的UI效果。

Neumorphism UI 的主要问题是使用内阴影和挤压的形状作为“选中”状态的概念。默认状态和选中状态之间可感知的差异非常小，甚至非视力障碍的用户有时也会完全忽略它。这也反过来导致了 Neumorphism UI 最大的缺陷，可访问性很大差！

阴影的分层

Web UI 中的阴影和现实中的阴影是相似的，同一个元素不局限于只有一个阴影。就 CSS 中的阴影来说，也是的，不管是 text-shadow 、box-shadow 还是 drop-shadow() 都可以同时存在多个阴影：

简单地说，就是在阴影的属性中使用逗号（,） 分割（放置）多个描述阴影的值。使用多层阴影，可以构建一些 3D 的 UI 效果：

阴影的模糊度

现在的大多数设计软件都有一个高斯模糊的设置，比如 Sketch 中的高斯模糊：

正如上图所示，除了高斯模糊（Guassian Blur）之外，还有动感模糊（Motion Blur）、缩放模糊（Zoom Blur）和背景模糊（Background Blur）：

比如前面提到的 iOS 中的模糊效果、Glassmorphism UI（也称之为 Glass UI）和磨砂效果：

高斯模糊是最常见的模糊类型，但他和阴影并没有任何关系。

而在阴影中也存有模糊，可以帮助你在物体下产生非标准的，点状的阴影。只要模糊一个椭圆，并将它放在投射阴影的物体下面。你可以单独使用它，也可以将它与标准的投射阴影结合起来，获得更独特的效果。

正如上面所述，阴影是离不开光的，也正因此，也将其称为光影效果。前面介绍的是阴影中的一些概念和基础，但光和阴影是复杂的学科，实物的阴影受光源的类型、物体的明暗、光源的位置等因素的影响。正如 @卢维贤 在站酷分享的《了解设计中的光影视界》一文中文末提到的光影的相关知识图谱：

CSS 中的阴影

以我的愚见，一个好的 Web 页面或应用应该给用户有一个切实的“真实”的质感。在 Web 中实现这些质感有很多因素，阴影就是其中一个关键因素。

阴影能给元素增加真实的质感、透视、并强调元素的尺寸。简单地说，可以增加物理上的真实感，让人有一种丰富的、可触摸的 UI 界面！

在 Web UI 的开发中，实现阴影效果就需要用到 CSS 技术。在 CSS 中，主要使用 text-shadow 、box-shadow 和 filter中的drop-shadow() 来实现。

• 文本阴影：text-shadow 给文本添加阴影
• 盒子阴影：box-shadow 给元素盒子添加阴影
• 不规则阴影：也投影，drop-shadow()可以给文本、盒子以及不规则形状添加阴影

文本阴影：text-shadow

先来看文本阴影，即 CSS 的 text-shadow 属性。

text-shadow 是 CSS Text Decoration Module Level 3 规范中的一个属性。主要用来给 Web 中的文本添加阴影。该属性语法规则很简单：

text-shadow: none | [ <color>? && <length>{2,3} ]#

其默认值为 none，表示文本无阴影。

text-shadow 接受四个参数值，分别是：

• <x-offset>：x轴（或Inline Axis）位移值，该值是必选值。表示阴影在x轴相对于文本的偏移量，即水平偏移量。它的值可以是正负值，如果是正值，表示阴影向右偏移；如果是负值，表示阴影向左偏移
• <y-offset>：y轴（或Block Axis）位移值，该值也是必选值。表示阴影在y轴相对于文本的偏移量，即垂直偏移量。它的值可以是正负值，如果是正值，表示阴影向下偏移；如果是负值，表示阴影向上偏移
• <blur>：可选值，如果该值未显式设置，其值为0。该值表示阴影模糊半径，其值越大，表示阴影模糊半径越大，阴影也就越大越淡
• <color>：可选值，如果该值未显式设置，其值使用 UA（用户代理）自行选择的颜色

text-shadow的使用很简单：

.text-shadow {
    text-shadow: 5px 5px 5px #09faa0;
}

你可以尝试调整下面示例中运用于 text-shadow 属性上各参数，查看效果的变化：

text-shadow属性中的 x-offset、y-offset 和 blur 三个参数的值是个<l