CSS 的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是 at 规则，另一种是 qualified rule，也就是普通规则。

at-rule 由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束。这些 at-rule 在开发中使用机会远远小于普通的规则，所以它的大部分内容，你可能会感觉很陌生。 这些 at 规则正是掌握 CSS 的一些高级特性所必须的内容。

qualified rule 则是指普通的 CSS 规则，也就是我们所熟识的，由选择器和属性指定构成的规则。

@charset ： https://www.w3.org/TR/css-syntax-3/ 

@import ：https://www.w3.org/TR/css-cascade-4/ 

@media ：https://www.w3.org/TR/css3-conditional/ 

@page ： https://www.w3.org/TR/css-page-3/ 

@counter-style ：https://www.w3.org/TR/css-counter-styles-3 

@keyframes ：https://www.w3.org/TR/css-animations-1/ 

@fontface ：https://www.w3.org/TR/css-fonts-3/ 

@supports ：https://www.w3.org/TR/css3-conditional/ 

@namespace ：https://www.w3.org/TR/css-namespaces-3/

@ viewport

普通规则
 选择器 
 声明列表 
   属性 
   值 
     值的类型 
     函数

Carson
在网站上搜索了一下，发现 css 函数有不少，尤其是近三年，增加的函数几乎超过过去的总和。

按照 winter 老师提到「知识完备性」的思路，尝试整理了一下 CSS 函数。

按照功能，分成以下 5 个类别（可能并不完全准确）：

# 1. 图片

* filter
    * blur()
    * brightness()
    * contrast()
    * drop-shadow()
    * grayscale()
    * hue_rotate()
    * invert()
    * opacity()
    * saturate()
    * sepia()
* cross-fade()
* element()
* image-set()
* imagefunction()

# 2. 图形绘制
* conic-gradient()
* linear-gradient()
* radial-gradient()
* repeating-linear-gradient()
* repeating-radial-gradient()
* shape()

# 3. 布局
* calc()
* clamp()
* fit-content()
* max()
* min()
* minmax()
* repeat()

# 4. 变形/动画
* transform
    * matrix()
    * matrix3d()
    * perspective()
    * rotate()
    * rotate3d()
    * rotateX()
    * rotateY()
    * rotateZ()
    * scale()
    * scale3d()
    * scaleX()
    * scaleY()
    * scaleZ()
    * skew()
    * skewX()
    * skewY()
    * translate()
    * translate3d()
    * translateX()
    * translateY()
    * translateZ()

# 5. 环境与元素
* var()
* env()
* attr()

👍121  2019-02-07

Sevens 些粉
推荐一下《css世界》这本书，有理论基础也有实战应用和常遇坑，看了两章感觉不错。
👍24  2019-02-08