CSS奇技淫巧

在详细介绍CSS原理之前我们来简单回顾一下浏览器加载页面的步骤，简单可以概括为以下几个步。 页面加载       浏览器根据DNS服务器得到域名的IP地址       向这个IP的机器发送HTTP请求

我们在实际的开发过程中可能会遇到一些页面变色效果，需要一些简单的判断。虽然用JS来实现非常简单，但是如果能用CSS来替代岂不是更加的优雅？ 案例1 比如下面这种场景，某个数据大于一定值之后开始变色。

冷门但好用的CSS选择器 css选择器大家在开发中一定频繁的用到过，绝大多数情况我们使用最频繁的往往就是元素选择器，类选择器，ID选择器，后代选择器。但是随着页面复杂程度的提高，用我们之前使用的那些常

在我们项目实际运行中，浏览器在接收到服务端返回的 HTML 之后，需要把这段数据渲染成用户看到的页面，在开始渲染第一个元素之前可能还需要经过很多步骤。这个过程会适用于整个页面，包括当前不可见的内容。所

防抖和节流是我们常用的优化交互手段，防抖是在n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时 节流是n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。不论哪一种我们之前都是通过js来

滤镜大家生活中应该都有用过，一般都是对图像进行一些颜色上的处理，css中的滤镜filter也类似，但是不仅可以作用于图像还可以对页面其他元素进行意想不到的处理，下面给大家演示一下filter的强大之处

大家曾经可能在各种网站上看到各种镂空，渐变等炫酷的文字效果。但是实际开发中可能接触的很少，下面为大家揭秘一下这是如何实现的。 背景裁剪Background-clip 这个属性字面上其实是背景裁剪的意思

对于初次接触grid的同学来说，直接上手使用的时候可能没有那么顺畅，下面我将结合自己的使用经验，来给大家总结一下项目里常用的写法和思路。  案例1  本次给大家分享一种容器宽度和列数不固定，但是元素