css数据类型定义的是css属性中具有代表性的值，在规范的语法格式中，使用关键字外加一对 <和>表示，例如数值类型
举个例子：background-image这个css属性语法结构如下：
background-image : none | 这里的image就是一种数据类型，它包括下面这些类型和函数：
1、
2、
3、element()
4、image()
5、iamge-set()
6、cross-fade()
7、paint() 这也就是说background-image属性不仅支持url()函数和渐变图像，还支持element()、image()、image-set()等函数。
再来看一个例子：mask-image，该属性可以设置图片蒙版，它的数据类型为：
mask-image : none | | /*效果如下*/
.masks{
width: 200px;
height:200px;
background-color: cyan;
mask-image: url(../images/music.png);
-webkit-mask-image: url(../images/music.png); /* 兼容谷歌 */
}
数据类型文档：
mdn web docs文档：https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value
数据类型文档：https://www.zhangxinxu.com/wordpress/2019/11/css-value-type/#color-zxx
CSS属性值定义语法详解css的语法基本包含下面3中基本组成元素：
- 关键字
- 数据类型
- 符号
举个例子：线性渐变
background-image: linear-gradient(to bottom right, red, yellow);
/*拆解*/
linear-gradient([ | to ,] ? );
/*
to：关键字，用来指定方向
angle：角度
side-or-corner：方向（left | right | top | bottom),关键字to可以指定方向
color-stop-list：颜色集合（red, yellow）
*/ 1、关键字：
关键字分为通用关键字和全局关键字
aoto、none、ease等关键字是通用关键字，这些关键字只被部分css属性支持inherit、initial、unset和revert是全局关键字，会被所有css属性支持。
2、数据类型：上面有讲过这里就不多赘述。
3、符号：css语法中的符号分为字面符号、组合符号和数量符号三类。
(1)、字面符号：css属性值中原本就支持的合法符号，就是字面意思的符号，目前就两个：
| 符号 | 说明 |
|---|---|
, |
并列分隔符，用来分隔数个并列值，或者分割函数的参数值 |
/ |
缩写分隔符，用来分隔一个值的多个部分，在css缩写中用于分离类型相同但属于不同css属性的值，以及用在部分css函数中。凡是出现 / 的地方，斜杠前后的数据类型一定是相同或者部分相同的，否则整个语句就是非法的。 |
(2)、组合符号：用来表示数个基本元素之间的组合关系，目前有5个：
: 并列，符号位普通空格符，表示各部分必须出现，同时需要按顺序出现|&& : “与”组合符，各部分必须出现，但可以不按顺序出现，相当于js的&&|| : “或”组合符，相当与js的||，只要包含一个即可满足条件，可以全部出现，可以不按顺序出现 |：“互斥”组合符，各部分恰好出现其中一个[]：方括号，将各部分进行分组以绕过上面几个符号的优先规则，因此方括号的优先级最高
3、符号数量
用来描述一个元素可以出现多次，数量符号不能叠加出现，并且优先级高于组合符号，目前有6个。
| 符号 | 说明 |
|---|---|
|
无数量符号，表示恰好出现一次 |
* |
星号，可以出现任意次数 |
+ |
可以出现一次或多次 |
? |
可以出现零次或者一次，也就是该元素是可选的 |
{a,b} |
出现最少a次，最多b次 |
# |
可以出现一次或多次，但多次出现时必须以逗号分隔 |
! |
表示当前分组必须产生一个值，该符号多出现在组合符号方括号的后面 |
了解这些之后，再来拆解一下上面的线性渐变
background-image: linear-gradient(to bottom right, red, yellow);
/*拆解*/
linear-gradient([ | to ,] ? ); background-image: linear-gradient(red, yellow);[ | to ,] ?
/* 表示角度或者方向只能选一个，要么选角度，要么选方向，如果选方向则可以设置多个方向 */
/* 表示并列的颜色集合：red , blue */
/* 线性渐变效果 */
background-image: linear-gradient(to bottom right, red, yellow); 效果：
通过上面的例子，再做一下拓展
拓展一：
/* 各部分只要出现一个即可满足条件 */
border : || ||
/* 线宽 线的类型 颜色 */
/* 由此可得 */
border : 1px solid red;
/* 也可以 */
border : 1px solid; 
拓展二：
border-shadow : none | [ , ]#
/* 相当于 */
border-shadow : none | [ , ] *
/* 效果 */
box-shadow: 10px 0px 0px 0 red, -10px 10px 0px 0 cyan; 