8个CSS片段展示了阴影效果的力量如果没有CSS，网页设计师会在哪里？不久以前，像垂线阴影这样简单的东西还需要使用图形。

如果没有CSS，网页设计师会在哪里？不久以前，像垂线阴影这样简单的东西还需要使用图形。现在，这只是写一两行代码的问题。

这对于给你的文本和容器添加一些基本的效果是很好的。但也有可能超越。通过CSS，你可以创建一些令人印象深刻的阴影，与Photoshop等工具中的阴影相媲美。

这些效果可以帮助元素脱颖而出，同时提供深度和视觉视角。一点点阴影就能为设计带来惊人的效果。

我们在CodePen上找到了CSS阴影效果的主要例子。这里有一些顶级的片段，既包括日常的感性，也包括令人瞠目结舌的复杂性。

美丽的CSS盒状阴影作者：Airen

CSS的 box-shadow属性是非常灵活的--这个片段就是证明。有90多个不同效果的例子，你肯定能找到适合你的效果。把这段话收藏起来，作为一个方便的参考。

请看笔者的《美丽的CSS盒状阴影》（Airen）。

这个404错误提供了一个独特的阴影处理方法。它结合了CSS变换和绝对位置的元素，为每个容器创造一个倾斜的外观。其结果是一个很酷的美学，有一个突出的视觉流。

对阴影的创造性使用可以将你的作品带到一些有趣的地方。在这里，它们被用来制作一些偏移的外观，包括半色调的SVG图案。它们创造了一种轻松的氛围，可以很好地与页面标题和英雄区域等功能相匹配。

见马克-米德的《笔触、阴影和半色调效果》。

这里看到的 "Netflix "效果包括一个标志性的长阴影，它消失在最终结果中。这是一个相对基本的CSS关键帧动画，但却产生了大胆的影响--就像你最喜欢的节目的开头一样。更棒的是，你可以在你的浏览器中自定义文本。

我们倾向于看到阴影被用来创造对比--这里不是这样的。相反，这个 text-shadow属性为这些人物提供了一个霓虹灯的外观。加入一点动画，你就有了一个引人注意的标题或标志。

请看Erik Jung的PenNeon文本阴影效果。

阴影也可以用来增强照明效果，就像我们在这个信封上看到的那样。将鼠标悬停在物体上，注意透视阴影是如何随着信封的移动而缩小的。虽然这不是主要的吸引力，但它肯定会增加一丝真实感。

请看Jake Giles-Phillips的钢笔动画CSS邮件按钮

在文本阴影背后隐藏的技巧中，有一种能力是将阴影分层--都在同一个属性中。总的来说，有多达9个层用于创建这个多色的3D文本。虽然这个片段有一种很酷的复古气息，但还有很多其他的可能性。

为一个非矩形的形状添加阴影似乎不是什么大事。但在网络上，这并不总是可能的。在这里，Chris Coyier演示了，通过使用CSSfilter 属性，我们可以创建一个阴影，完美地沿着自定义形状的路径前进。

参见Chris Coyier的《形状上的笔形阴影》。

是的，经典的投射阴影还活着，而且很好。但是，多亏了CSS，其他各种阴影效果也都在发挥作用。这意味着你可以在不离开代码编辑器的情况下创造出真正独特的东西。

无论你是想添加一个微妙的类，还是更极端的东西，上面的片段可以告诉你如何实现它。而且，这可能比你想象的还要简单。

想了解更多的CSS阴影效果？请到我们的CodePen集合中开始浏览吧。