css数据类型定义的是css属性中具备代表性的值，在标准的语法格局中，应用关键字外加一对 <和>示意，例如数值类型<number>、色值类型<color>等。
举个例子：background-image这个css属性语法构造如下：

background-image : none | <image>

这里的image就是一种数据类型，它包含上面这些类型和函数：

1、<url>2、<gradient>3、element()4、image()5、iamge-set()6、cross-fade()7、paint()

这也就是说background-image属性不仅反对url()函数和突变图像，还反对element()、image()、image-set()等函数。

再来看一个例子：
mask-image，该属性能够设置图片蒙版，它的数据类型为：

mask-image : none | <image> | <mask-source>
/*成果如下*/ .masks{            width: 200px;            height:200px;            background-color: cyan;            mask-image: url(../images/music.png);            -webkit-mask-image: url(../images/music.png);  /* 兼容谷歌 */   }<div class="masks"></div>


数据类型文档：
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([<angle> | to <side-or-corner> ,] ? <color-stop-list>);/*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([<angle> | to <side-or-corner> ,] ? <color-stop-list>);
background-image: linear-gradient(red, yellow);[<angle> | to <side-or-corner> ,] ? /* 示意角度或者方向只能选一个，要么选角度，要么选方向，如果选方向则能够设置多个方向 */<color-stop-list>/* 示意并列的色彩汇合：red , blue *//* 线性突变成果 */background-image: linear-gradient(to bottom right, red, yellow);

成果：

通过下面的例子，再做一下拓展
拓展一：

/* 各局部只有呈现一个即可满足条件 */border : <line-width> || <line-style> || <color>/* 线宽 线的类型 色彩 *//* 由此可得 */border : 1px solid red;/* 也能够 */border : 1px solid;


拓展二：

border-shadow : none | [ <shadow>, ]#/* 相当于 */border-shadow : none | [ <shadow>, ] */* 成果 */box-shadow: 10px 0px 0px 0 red, -10px 10px 0px 0 cyan;