css 数据类型非常的多，这里只记录学习到的常用的一些数据类型

<angle>

angle 为角度，用于表示角的大小。单位为度（degrees）、 百分度（gradians）、弧度（radians）或圈数（turns）。

• deg：度。一个完整的圆是 360deg。例：0deg，90deg，14.23deg。
• grad：百分度。一个完整的圆是 400grad。例：0grad，100grad，38.8grad。
• rad：弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。
• turn： 圈数。一个完整的圆是 1turn。例：0turn，0.25turn，1.2turn。

<alpha-value>

透明度。如果以数字形式给出，则有用的范围是 0（完全透明）到 1.0（完全不透明）。如果以百分比形式给出 alpha 值，则 0% 对应于完全透明，而 100% 表示完全不透明。

<box>

box 数据类型即是盒模型的代表 它支持以下几种类型：

• border-box：定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则
• padding-box： 定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则
• content-box：定义一个由内容区域的外边缘封闭形成的形状。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。

<basic-shape>

• inset() inset( <shape-arg>{1,4} [round <border-radius>]? ) 定义内嵌矩形。可以指定圆角大小，生成圆角矩形形状。
• circle() circle( [<shape-radius>]? [at <position>]? ) 定义圆形。可以指定圆的半径大小和圆心位置。
• ellipse() ellipse( [<shape-radius>{2}]? [at <position>]? ) 定义椭圆。可以指定椭圆的半径大小和圆心位置。
• polygon() polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) 定义多边形。 可以指定填充规则是 nonzero（默认值）还是 evenodd，以及具体形状参数。
• path() path( [<fill-rule>,]? <string>) 定义路径。<fill-rule>表示填充规则，<string>就是 SVG Path 路径了，需要引号。

<color>

色值类型

• <rgb()>
• <rgba()>
• <hsl()>
• <hsla()>
• <hex-color>
• <named-color>
• currentColor
• <deprecated-system-color> 废弃的系统颜色

<color-stop>

颜色断点,通常出现在渐变中， 例如 background-image: linear-gradient(white 50%, black 50%); 中的 white 50%和 black50%就是该类型

<color-stop-list>

颜色断点集合。即多个<color-stop>连结成的集合， 如上面的white 50%, black 50%就是一个集合，是一个<color-stop-list>类型

<shape-box>

shape-outside 可以使用<shape-box>类型来指定形状，参考 CSS Box 模型中的有关边缘（edges）的内容。shape-box 类型中有以下几种属性

• <box>: 即 box 基础类型中所有的属性值
• margin-box：定义由外边缘包围的形状。该形状的角部半径由相应的 border-radius 和 margin 值确定。如果 border-radius/ margin 为 1 或更大，则边距框角半径为 border-radius+ margin。如果边界半径/边距的比率小于 1，则边距框角半径为 border-radius + (margin * (1 + (ratio-1)^3))

<side-or-corner>

边角类型走向，借助 to 可以指定行进方向

• [left | right] || [top | bottom]

<image>

CSS 的<image>数据类型描述的是 2D 图形。在 CSS 中有两种类型的图像：简单的静态图像，经常被一个在使用的 URL 引用，动态生成的图像，比如 DOM 树的部分元素样式渐变或者计算样式产生。

• <url> 数据类型
• <gradident> 数据类型
• element()
• image()
• image-set()
• cross-fade()
• paint()