这篇文章绝对不是对任何一个曾经和我共事过的人的批判，仅仅是我最近在做一些个人研究的时候学到的关于 CSS 的一些要点。 有很多开发者并不怎么关注 CSS，我想这已经不是什么新鲜事了。通过网上的各种对话，或者与朋友和同事聊天的时候你都可以观察到这个现象。 然而，在社区中，我们学到…

正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，我们需要使用 filter + mix-blend-mode 的组合来完成。 如上图，整个蜡烛的骨架， 除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，并且如何赋予动画效果。 模糊滤镜…

这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。 因为 MDN 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： 那么，这个属性可以先理解为，元素在发生断行时其样式的表现形式。 这个属性…

通过元素类型 tagName、*、.class 或 #id 匹配一个或多个元素。 通过 属性 / 属性值 匹配一个或多个元素。 伪类：匹配元素的相关状态和属性，如 :hover :first-child :nth-child() ，单冒号。 伪元素：匹配元素的相关位置, 如 :…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

When implementing a user interface in a browser, it’s good to minimize those differences and issues wherever you can, so that the UI is pre…

Electron 4.0.0 发布，不再支持 macOS 10.9 及以下版本。内核更新至 Chromium 69、Node.js 10.11.0、V8 6.9.427.24。🔗 V8 引擎 7.2 Beta 版发布，大幅提升了 JavaScript 解析速度，同时还带来了更…

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。 为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。 心形是由两个圆…

比如下图中，有的列表项的文字短，有的文字长。 需求是：希望文字长的部分能通过动画滚动显示。 我的第一反应是用纯 CSS 做不了。 其中涉及了一些有趣 CSS 知识点，在这里分享一下。 1. 如何让文字溢出容器？ work-break 属性是用来处理文字如何换行的，这里使用了不太…