在 CSS 中设计美丽的阴影

我最喜欢的博客文章类型是，有人会拿一个我花了五分钟才考虑完的主题，然后说——不！这是一个值得写论文的巨大话题。看看你能用这个小小的 CSS 属性做多少事情！

当我看到 Josh Comeau 发表的这篇文章时，我想起了这一点，它介绍了在 CSS 中设计美丽的阴影。

恕我直言，最好的网站和网络应用程序都具有可触及的“真实”品质。实现这种品质需要很多因素，但阴影是必不可少的组成部分。

但是，当我浏览网络时，很明显，大多数阴影并不像它们本可以的那样丰富。网络上到处都是模糊的灰色方框，看起来根本不像阴影。

Josh 展示了老旧乏味的阴影方法，然后探讨了所有改进和优化它们的方法，使阴影具有真正的深度。这一切都归结于仔细观察颜色并探索 box-shadow CSS 属性。说到深度，Rob O’Leary 的 “深入研究阴影” 是对阴影的另一个全面概述。

我之前也完全忘记了 filter: drop-shadow；它在将阴影添加到想要投射到页面上的图像时特别有用。总之，这些都是很棒的东西。

直接链接 →