在之前两篇文章中我们已经讨论过如何使用 BEM 和 Namespace 来编写模块化的 CSS。这篇文章中，我想避开把 CSS 选择器作为 CSS 文件结构和组织的依据的方法。 如果你思考过关于什么是文件组织的最佳实践，或者怎样能够在项目目录中更容易的找到你要找的 CSS 文件，或者一个文件应该是多大或者多小合理等问题，那么这篇文章就是为你写的。

CSS Shapes 允许我们通过定义文本内容可以环绕的几何形状、图像和渐变，来创建有趣且独特的布局。本次教程会教你如何使用它们。 在 CSS Shapes 问世之前，为网页设计文本自由环绕的杂志式布局几乎是不可能的。相反，网页设计布局传统上一直用网格、盒子和直线构造。 CSS…

现在已经是 9102 年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如 stylelint-processor-html 已经不再维护，以及 --fix 之后 .vue 文件只剩下 <style> 部分等。我在踩完坑跑通出满意的效果后，维护一份新的指引，以备…

实例带你看懂 CSS Grid 布局与 Flexbox 布局的区别，希望对你有所帮助。

transition-duration这是一个过渡时间的设置。 该属性用于描述属性的中间值。即该两个状态变化的过渡曲线 其取值是一个三次方的贝塞尔曲线的值。填入一个三个值，根据贝塞尔曲线 在adobe系列的软件中ai，ps等都应有了贝塞尔曲线，css中也有贝塞尔曲函数。 根据这…

这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个…

我们使用Flexbox 实现垂直水平居中、自适应容器宽度乐此不疲，因为确确实实很方便。可以简便、完整、响应式地实现各种页面布局，目前已得到所有现代浏览器的支持。但Flex属性如何计算呢？ Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒状模型提供最…

水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了： 嗯。这里其实就涉及了一个问题，如何让 margin: auto 在垂直方向上生效？ 让元素相对父元素水平居中。但是如果我们想让元素相对父元素垂直居中的话…

animate-text 轻巧易用的文本动画