💎 如果你希望在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。💎

一、字体小于12px的解决方案 常用的方法是利用 transform: scale(0.5)。 使用方法有两种： 将字体单独放在一个盒子内，利用 transform: scale 缩小字体。Eg：把红

巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。 有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。…

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

一、CSS写自适应大小的正方形代码：效果图：原理：元素的padding的百分比值四个值均根据当前元素的宽度来计算的padding只能取top或者bottom，自适应正方形其值要和宽一致，当然其他不同比

SVG 是优秀且令人难以置信的强大图像格式。本教程通过简单地解释所有需要了解的知识，为您提供 SVG 的概述。

首先，让我们先看一下效果图。 这就是我们将要实现的 DEMO。 如果你想小试身手，可以在 Codepen 上创建一个 pen，编写教程代码。 1. 添加 class 作为标记 如果你不清楚为什么类名中出现了破折号，我在 这篇文章 中解释了背后的原因。 现在我们有一些文本，以及一…