背景 👏最近在工作中遇到一个水球进度条，用svg绘制几个波浪叠加动画写起来超简单，css3动画+svg实现水球进度条~

网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

前端主题切换方案 现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家

CSS filter在日常开发中是很常见的，这里我们将使用它实现一些动画效果，让网站交互更加酷炫，同时也加深对CSS filter的理解。

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。 我们会发现，当容器宽度设置为0后，由于首选宽度的影响，出现了基于文字空间的形状。 理论上父元素宽度因该是子元素宽度之和，但是却出现了上图的现象…