当您将某些东西（例如一张普通纸）放入马尼拉文件夹时，该东西的一部分可能会从文件夹中露出一点。 钱包和信用卡也是如此。 这些卡片只是轻轻地伸出来，因此您可以快速浏览一下您携带的卡片。
我把这种东西称为“狭缝”。 狭缝是我们创造开口错觉的地方，通过它我们可以挑逗从中窥视的视觉元素。 我们可以在 CSS 中做到这一点！
设计的关键部分是阴影，它提供了存在狭缝的视觉提示。 然后是狭缝的盖子，它为展示的元素从下面窥视提供了空间。
这是我们要一起做的：
让我们从创建阴影开始
您可能会惊讶于示例中的阴影不是使用实际的 CSS 阴影创建的，例如 box-shadow 或者 drop-shadow() 筛选。 相反，阴影本身就是一个单独的元素，黑暗且模糊。 这对于使设计在默认和动画状态下更具适应性很重要。
封面是设计中的另一个元素。 封面就是我所说的与阴影重叠的元素。 这是一个描绘阴影和覆盖物如何结合在一起的图。
阴影由具有渐变背景的小直立矩形制成。 渐变在中间更暗。 所以当元素被模糊时，它会在中间产生一个更暗的阴影； 因此更具维度。
现在，重新创建的阴影的左半部分在顶部被一个矩形覆盖，颜色与其容器的背景完全相同。
然后封面和阴影都稍微向左移动，因此看起来像是分层的
在封面上工作
为了使封面与设计的背景融为一体，其背景颜色继承自其包含元素。 或者，您也可以尝试使用标准将封面与其背景混合，例如 CSS 蒙版 和 混合模式，取决于您的设计选择和要求。
要了解有关如何应用这些标准的一些基础知识，您可以参考以下文章：Sarah Drasner 的 “掩蔽与剪裁：何时使用各自” 为面膜提供出色的底漆。 我还写过关于 CSS 混合模式的文章 在这篇文章中 你可以在哪里复习这个话题。
在我的示例的源代码中，您会注意到我将元素对齐并堆叠在
CSS Grid 还允许我做的是设置所有这三个 divs 所以它们都是全角的
main > div {
grid-area: 1 / 1;
}这使所有东西都堆叠在一起。 通常，我们会努力避免用网格中的其他元素覆盖元素。 但是这个例子依赖于它。 我给了 .slit-cover 宽度为 50%，自然会显示其下方的图像。 从那里，我设置了一个 transform 将其向负方向移动 50%， 加 我之前移动阴影的少量（25px) 以确保也显示出来。
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}我们终于得到它了！ 一个看起来很自然的狭缝，模仿从文件夹、钱包或其他东西中窥视的东西。
还有更多方法可以做到这一点！ 一方面，Flexbox 可以像这样让元素排成一行并居中对齐。 有很多方法可以并行处理。 也许你有办法使用 box-shadow 属性， drop-shadow() 过滤，甚至 SVG 过滤器 获得与真正出售幻觉的相同类型的阴影效果。
你可以完全重复这个来获得你自己的外观和感觉。 例如，尝试交换阴影和图像的位置。 或玩弄颜色组合并更改 blur() 过滤 价值。 封面和阴影的形状也可以调整——我敢打赌，你可以创建一个弯曲的阴影而不是直线阴影，并在评论中与我们分享！
