我们亲爱的朋友 Robin 有一篇新的文章，名为 赞美阴影。现在，在你去看关于 CSS 盒阴影、文本阴影和阴影过滤器的片段之前……这不是这样。这是一篇关于摄影的文章，以及 Robin 在用相机处理阴影方面学到的东西。
那么，为什么要分享呢？因为他在一篇名为“赞美阴影”的文章页面上发布了这篇酷炫的文章。如果你打开它的 DevTools，你会学到很多关于 CSS 的知识。
- 居中技术。 注意 CSS Grid 如何在
<body>上使用，仅仅是为了 将小册子居中。然后 Robin 在每篇论文的.frame上再次使用它，对内容做同样的事情。 - “伪”背景图片。 Robin 本可以为自己制造很多工作，通过为每个
.frame创建一个 CSS 类来获取背景图片。相反，他使用object-fit: cover内联的 HTML<img>来保持长宽比，同时填充.frame容器。（他实际上 之前写过关于这个的。）这确实节省了很多 CSS 代码，但也允许他在需要时使用 alt 文本。我有点想知道<figure>/<figcaption>结构是否可以在这里使用，但我怀疑它不会为正在发生的事情提供更多好处。 - 堆叠上下文。 这些伪背景图片的另一个好处？它们使用绝对定位，这会创建一个堆叠上下文，允许 Robin 在图片上设置
z-index: 0。这样，文本就会直接堆叠在上面，z-index: 1。同样，CSS Grid 处理了所有居中，因此一切都很好地对齐了。 - 滚动捕捉。 我总是喜欢在野外看到 CSS 滚动捕捉。Robin 在这里做了一个很好的选择，因为它确实有利于整个翻页体验，同时滚动浏览框架。水平滚动可能很令人抓狂，但也非常优雅，当像这里一样执行良好时，它会增强窄列设计。如果你想了解它的工作原理，Robin 也 写过关于水平滚动捕捉的文章.
如果没有别的，Robin 是一位优秀的作家，他发表的任何文章都值得一读，包括 CSS 和其他文章。