数据类型和函数
CSS 属性可以接受的通用数据类型（值和单位）
Last updated
CSS 属性可以接受的通用数据类型（值和单位）
Last updated
每个 CSS 声明都包含一个属性:值对。根据不同的属性，其值可能是一个关键字或数值，也可能是一系列关键字或值，它们有的带单位有的不带单位。在 CSS 中，就有一组 CSS 属性可以接受的通用数据类型（值和单位）。
CSS 数据类型定义了 CSS 属性和函数所能接受的典型值（值和单位）。CSS 函数也是一种 CSS 值，它能表示更复杂的数据类型或是调用特殊的数据处理和计算逻辑。
最常用的数据类型和函数都定义在《CSS Values and Units》规范中，其它的数据类型就定义在与其相关联的规范中。
CSS data type，CSS 数据类型
CSS functional notation，CSS 功能符号，通常叫 CSS 函数
这部分只介绍被 <> 括起来的数据类型（不包含关键字）和常见的 CSS 函数。
<string>
字符串
<number>
<integer>
数值
<position>
top, right, bottom, left
center
<length-percentage>
<dimension>
<number>+单位
指定距离/时间/频率/分辨率等尺寸
<length>
<number>+单位
绝对单位（长度）：
px, pc, pt
in
cm, mm, Q
相对单位（字体）：
em, rem
ex, rex
cap, rcap
ch, rch
ic, ric
相对单位（视口）：
vw, vh
vmin, vmax
svh, lvh, dvh
svw, lvw, dvw
相对单位（查询容器）：
cqw, cqh, cqi, cqb,
cqmin cqi,
cqmax cqi
<time>
<number>+s|ms
单位 s, ms
<angle>
<number>+单位
单位 deg, grad, rad, turn
<flex>
<number>+fr
单位 fr
<resolution>
分辨率，像素密度
单位 dpi, dpcm, dppx, x
<ratio>
<number>/<number>
纵横比，媒体查询，eg.16/9
<percentage>
<number>+%
<length-percentage>
<length> 或 <percentage>
<time-percentage>
<time> 或 <percentage>
<angle-percentage>
<angle> 或 <percentage>
<url>
an absolute URL a relative URL a data URI
url()
<image>
二维图像，综合型
可以是以下类型：
<url>
<gradient>
可以是以下函数：
element()
image(), image-set()
cross-fade()
paint()
<gradient>
linear-gradient()
conic-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
repeating-conic-gradient()
<color>
综合型 可以是各种关键字
rgb(), rgba()
hsl(), hsla()
hwb(), lch(), lab()
color()
color-mix()
color-contrast()
<blend-mode>
当元素重叠时如何显示颜色
用在如下属性：
background-blend-mode
mix-blend-mode
<basic-shape>
在以下属性中使用：
clip-path
shape-outside
offset-path
inset() 矩形
circle()
ellipse()
polygon()
path()
<shape>（已废弃）
用在 clip 属性（已废弃）
已被 clip-path 属性替代
rect() 已废弃
<transform-function>
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
skew()
skewX()
skewY()
translate()
translate3d()
translateX()
translateY()
translateZ()
matrix()
matrix3d()
perspective()
<timing-function>
ease
ease-in
ease-out
ease-in-out
cubic-bezier()
step-start
step-end
steps()
<filter-function>
图像效果
grayscale()
opacity()
blur()
brightness()
hue-rotate()
contrast()
drop-shadow()
invert()
saturate()
sepia()
display（6个）<display-outside>
block, inline, run-in
<display-inside>
flow, flow-root
table, flex, grid
ruby
<display-listitem>
block, inline, run-in ? &&
flow, flow-root ? &&
list-item
<display-internal>
table-header-group
table-footer-group
table-column-group
table-row-group
table-caption
table-column
table-row
table-cell
ruby-base, ruby-text
ruby-base-container
ruby-text-container
<display-box>
contents, none
<display-legacy>
inline-block
inline-table
inline-flex
inline-grid
inline-list-item
<ident> 和 <custom-ident> 表示用作标识符的任意（用户定义）字符串
<frequency> 和 <frequency-percentage> 没有元素使用
<shape> 已废弃。为了方便对比，也在上述表格中列出来了
<an-plus-b>
除了上述表格中列出的与特定类型相关的函数之外，还有以下 CSS 函数。
calc()
clamp()
min(), max()
abs(), sign()
sqrt()
pow(), exp()
log()
round()
sin(), cos(), tan()
asin(), acos(), atan(), atan2()
hypot()
mod(), rem()
attr()
属性
var()
自定义变量
env()
环境变量
url()
counter()
counters()
content 属性
symbols()
list-style 属性, counter styles
repeat()
minmax()
fit-content()
stylistic()
styleset()
character-variant()
swash()
ornaments()
annotation()
font-variant-alternates 属性
local(), format()
@font-face 的 src 描述符的值
target-counter(), target-counters(), target-text()
type(), layer(), leader(), selector()
这部分主要对 CSS 的通用数据类型（值和单位）和常见函数做了下分类整理，旨在对其有个整体印象。
数据类型（36 个）
基本 + 尺寸（有单位） + 百分比
文件 + 图像 + 颜色 + 形状（都有函数）—— 相关函数 1+11+10+6 = 28 个
函数：转换 + 时间 + 滤镜（都是函数）—— 相关函数 33 个
display
CSS 函数（46 个）
数学 + 引用 + 计数器 + Grid
字体