引言 最近对象天天晚上加班看网页，眼睛一直不舒服，然后她就想下一个护眼包，让网页不那么亮。然后，她的电脑就就自动安装了很多软件，什么小鸟壁纸、360浏览器、金山毒霸、2345、鲁大师...... 嗐，

💭 WHAT display: contents，这是 CSS 中一个很有用的属性值。它可以让一个元素在布局中“消失”，但它的子元素仍然会保留在文档流中，就好像这个元素从未存在过一样。这意味着，原本由

梯形圆角tab/ 梯形tab/ chrome tab 的实现；要了老命了！！！！！！！！！！！！！！！！！

大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。 正常而言： 1vw 等于1/100的视口宽度 （Viewport Width）

周末无事，翻阅 Antfu 的博客，发现一篇很有意思的文章，用简单的 CSS animation 动画实现博客文章按照段落渐入，效果如下： 是不是很有意思呢？

我们经常会在博客、文档中看到类似这样的侧边导航目录，例如 这种导航也被称为“电梯导航”（当然可能还有其他叫法，知道是这个交互就行）。它会随着内容的滚动而自动切换当前选中态，点击任意目录也会自动滚动到对

你可能会想：“嗯，这是个很简单的事情！在图像上面添加一个额外的元素进行动画，就完成了。”没错，但我们不会使用任何额外的元素或伪元素。我们将只使用 <img> 元素来完成。这听起来可能不可思议。

在诸多被遗落在时光尘封之箱的CSS属性中，`contain`属性应该算是一颗耀眼的明珠，其在性能优化方面提供了诸多可能。

最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列