在我之前的开发中，CSS对于我来说，要用什么找什么，对CSS的了解并不算深入；在我刚开始深入学习CSS时，第一个遇到的就是CSS数据类型，我听说过JS、TS的数据类型，CSS怎么也有数据类型？但是随着我对CSS数据类型的了解，CSS的大门也在缓缓为我打开！！！
什么是CSS数据类型？
引用《CSS新世界》中的介绍：
CSS数据类型的定义是CSS属性中具有代表性的值，在规范的语法格式中，使用关键字外加一对尖括号表示。
怎么去理解呢，我们可以去看看官方文档中对于 background-color的描述：
background-color:
上面语法示例中的 <color>就是我们说的CSS数据类型；
掌握CSS数据类型对了解CSS新世界的体系和快速学习CSS新特性非常有帮助！！！！！（切记）
为什么要学习CSS数据类型？
首先我们要知道，在CSS中任何CSS属性ss值，都一定包含一个或者多个数据类型！
在CSS2时代，CSS数据类型的概念并不重要，因为CSS常用的属性翻来覆去就那么几个，这些属性在我们工作中经常用到，久而久之我们也就都记住了。
但是！在CSS3到来的时代，由于各个CSS模块独立发展，CSS3之后并不会再有统一的大版本变化，而是将CSS各个功能模块拆分为小模块独立发展，这也就导致短时间内大量的CSS新属性如雨后春笋般的冒了出来！
为了加速没有争议的CSS特性的标准化，W3C的CSS工作组做出了一项被称为“Beijing doctrine”的决定，该决定将CSS划分为更小的组件，并把这些组件成为模块。这些模块互相独立，各自按照自己的速度走向标准化。
例如：CSS选择器模块已经到了Level 4 了；弹性布局模块还是 Level 1
如果此时我们还和CSS2那样，只是凭借经验去记忆CSS的属性值，去学习CSS的新特性，那么学习起来肯定是十分痛苦的，因为效率非常低下！！！
因此CSS数据类型的优势就出来了，我们无需记住数量繁多的CSS属性值，只需要记住支持的数据类型即可！！
学习CSS数据类型有什么用？
我们直接来举个例子：
background-image 是一个非常常用的CSS属性，我们来看看它的语法结构：
上面的 <image> 就是一个CSS数据类型，它包括下面这些类型和函数：
<url>
<gradient>
element()
image()
image-set()
cross-fade()
paint()
也就是说，我们可以看到background-image属性不仅支持url函数和渐变图像，还支持element()等函数！！
这是，我突然问你：CSS的mask-image属性支持的属性值有哪些呢？
这么突然疑问，如果你没有用过这个属性，那相比一时半会你也想不出答案，让我们来看看官方文档吧！
这个语法中出现了与background-image 一样的 <image> 数据类型！！！这些就豁然开朗了！
这不就代表，background-image 支持的那些<url>、<gradient>、element()、image()#&c%sfUP9uc/3kA&w&cfkAmRpaGp8/36ltMAqr3ppTi2p09osoi4r9uIReaY6ozPEH5OCyX0sabc&%等等这些属性在mask-image中都是支持的?
这样，我们通过理解CSS数据类型，就学会了mask-image这个语法的一半！
CSS数据类型的互通互联
CSS数据类型除了可以帮助我们快速学习掌握CSS的语法，还能快速更新整个CSS世界的知识库。
举个例子：
我们都知道 background-image属性是支持 paint()函数的，但是我们现在问你，mask-image属性是否支持paint()函数？
此时，如果你是靠记忆实际属性，由于你大脑中的记忆库里没有相关信息的储备，因此你会疑惑，会不解，随后去翻阅官方文档，甚至还要做一个小demo来确认一下。
但是，如果你记忆的是<image>类型，你可以迅速回答出：肯定支持，因为mask-image属性值支持<image>数据类型，<image>数据类型中存在paint()函数。
因此，大家一定要关注CSS的数据类型，这可以让我们学习CSS得新特性更迅速，理解CSS新特新更轻松！
