我们亲爱的朋友罗宾有一篇新文章叫 在阴影的赞美中. 现在，在你跳到那里寻找关于 CSS 框阴影、文本阴影和阴影过滤器的掘金之前……这是 不是那个. 这是一篇关于摄影的文章，以及罗宾学到的关于用相机处理阴影的知识。
那么，为什么要分享这个？ 因为他制作了一篇专门针对一篇文章的文章导向页面，真是太酷了。 如果你打开 DevTools，你会学到很多关于 CSS 的知识：
- 对中技术。 注意 CSS Grid 是如何在
<body>只是为了 将小册子居中. 然后罗宾再次伸手去拿它.frame的文章对内容做同样的事情。 - “人造”背景图片。 Robin 可以通过为每个对象创建一个 CSS 类来为自己做很多工作
.frame获取背景图像。 相反，他使用object-fit: cover在内联 HTML 上<img>s 在填充时保持纵横比.frame容器。 （其实他 关于这个写 之前。）这确实节省了很多 CSS，但它也允许他在需要时使用 alt 文本。 我有点想知道如果一个<figure>/<figcaption>结构本来可以在这里工作，但我怀疑它会为正在发生的事情提供更多额外的好处。 - 堆叠上下文。 这些人造背景图像的另一个好处？ 它们使用创建堆叠上下文的绝对定位，允许 Robin 设置
z-index: 0在图像上。 这样，文本直接堆叠在顶部z-index: 1. 同样，CSS Grid 正在处理所有的居中，所以事情很好地对齐。 - 滚动捕捉。 我总是 爱 当我看到 CSS 滚动在野外捕捉时。 Robin 在这里使用它是一个不错的选择，因为它确实有助于在滚动框架时提供整个翻页体验。 水平滚动可能会让人抓狂，但如果执行得当，它也会非常优雅，因为它是如何增强窄列设计的。 如果你想很好地解释它是如何工作的，罗宾也有 关于水平滚动捕捉的文章.
如果不出意外，Robin 是一位出色的作家，他出版的任何东西，CSS 及其他内容都值得一读。
