CSS值类型文档大全

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9058

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

以前介绍过CSS单位大全，这里介绍下CSS值类型大全。

CSS值类型都是用 括起来表示。

本文类似参考文档，辛苦整理，全网独家，建议加入收藏夹或者云笔记之类。

一、索引

按照首字母排序。

二、详细

角度值。支持负值。格式是数值+角度单位。

角度单位包括下面这4个，兼容性都是一样的IE9+支持。

deg

角度。

我们日常所说“原地旋转360度”，这里的“度”就是
deg 。一个完整的圆是
360deg 。

grad

百分度。

百分度是角的测量单位，常用于建筑或土木工程的角度测量，非相关专业人士用的不多。一个完整的圆是
400grad 。

rad

弧度。

弧度是一种用弧长与半径之比度量对应圆心角角度的方式。一个完整的圆的弧度是2π，因此，一个完整的圆的弧度大约是
6.2832rad ，而
1rad 则是180/π角度。

turn

圈数。

一个完整的圆是1圈，也就是
1turn 。同样1/4圆就是
0.25turn 。

下表是角度值各个单位转换示意（取自 MDN ）：

	直角： 90deg = 100grad = 0.25turn ≈ 1.5708rad
	平角： 180deg = 200grad = 0.5turn ≈ 3.1416rad
	直角（逆时针）： -90deg = -100grad = -0.25turn ≈ -1.5708rad
	没有角度： 0 = 0deg = 0grad = 0turn = 0rad

表示CSS值的数据类型可以是 类型，也可以是 类型。

如果是 类型，实际上会解析为 类型，因此这种类型可以用在 calc() 表达式中。

目前还没有什么CSS属性的值符合上面的数据类型。

fallback的概念在CSS变量那里就有所体现，例如下面代码中的 #cd0000 就是fallback兜底备份值：

.var-fallback {
    background-color: var(--color-zhangxinxu, #cd0000);
}

而 是针对 attr() 表达式而言的。

大家对 attr() 表达式的印象应该都在content内容生成时候，那还是老语法：

attr(  )

而这里所说 是 attr() 表达式经过扩展后的全新的语法。

attr(  ? [ ,  ]? )

多了 和 这两个可选类型。

我们直接看一个例子，以便快速了解这两个可选参数是什么意思。

我们要实现这样一个功能，元素的宽度是根据设置的 size 属性值决定的，例如：

宽度80px
宽度120px
宽度160px

则可以使用下面的CSS语法：

button[size] {
    width: attr(size px, auto);
}

其中， px 就是 ，表示 size 值单位是px，如果没有这个参数，则以字符串显示 size 的属性值； auto 就是 类型。表示如果元素没有设置 size 属性值，或者设置的 size 值无法正确解析，就按照 auto 渲染。

But！目前尚未有浏览器支持该语法，遗憾。

例如：

.attr-name::before {
  content: attr(data-zhangxinxu);
}

上面的 data-zhangxinxu 就是 类型。

类型用在 clip-path ， shape-outside 以及 offset-path 属性中，表示基础形状。

例如：

clip-path: inset(22% 12% 15px 35px);
clip-path: circle(6rem at 12rem 8rem);
clip-path: ellipse(115px 55px at 50% 40%);
clip-path: polygon(50% 20%, 90% 80%, 10% 80%);
clip-path: path(evenodd, "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z");

形状方法语法

inset()

inset( {1,4} [round ]? )

定义内嵌矩形。可以指定圆角大小，生成圆角矩形形状。

circle()

circle( []? [at ]? )

定义圆形。可以指定圆的半径大小和圆心位置。

ellipse()

ellipse( [{2}]? [at ]? )

定义椭圆。可以指定椭圆的半径大小和圆心位置。

polygon()

polygon( [,]? [ ]# )

定义多边形。 可以指定填充规则是
nonzero （默认值）还是
evenodd ，以及具体形状参数。

path()

path( [,]? )

定义路径。
表示
填充规则 ，
就是SVG Path路径了，需要引号。

是混合模式类型，用在 background-blend-mode这mix-blend-mode 这两个混合模式属性上。

包括下面这些具体的值：

normal

正常呈现，谁在上面显示谁。

multiply

正片叠底。模拟颜料的颜色混合。颜色会变得更暗。

screen

滤色。模拟自然光颜色混合。颜色会变得更亮一些。

overlay

叠加。底下颜色更深则走multiply模式，底下颜色更浅则走screen模式。

darken

深色。哪个颜色深显示哪个。

lighten

浅色。哪个颜色浅显示哪个。

color-dodge

颜色减淡。最终颜色是底色除以顶色的倒数的结果。

color-burn

颜色加深。最终颜色是反转底部颜色、将值除以顶部颜色并反转该值的结果。

hard-light

强光。上面的颜色更深的时候表现为multiply，上面颜色更淡的时候表现为screen。这个值和overlay值类似，只是上下层作用条件对换了。

soft-light

柔光。最终的颜色类似于hard-light强光，但更柔和。此混合模式的行为类似于强光。这种效果类似于将漫射的聚光灯照射在背景上。

difference

差值。最后的颜色是从较浅的颜色中减去两种颜色中较深的颜色的结果。黑色层无效，而白色层反转另一层的颜色。

exclusion

排除。类似difference，但比difference对比度较低。与difference一样，黑色层没有效果，而白色层反转另一层的颜色。

hue

色调。最终颜色具有顶部颜色的色调，而使用底部颜色的饱和度和亮度。

saturation

饱和度。最终颜色具有顶部颜色的饱和度，同时使用底部颜色的色调和亮度。纯灰色的背景，没有饱和度，就没有效果。

color

颜色。最终颜色具有顶部颜色的色调和饱和度，而使用底部颜色的亮度。该效果保留了灰度，并可用于给前景着色。

luminosity

亮度。最终颜色具有顶部颜色的亮度，而使用底部颜色的色调和饱和度。这种混合模式相当于color，但层是交换的。

calc() 方法中一种类型。例如：

.some-zxx-class {
    width: calc( 100px / 3 + 30px * 2);
}

其中：

• 100px / 3 + 30px * 2 指的就是 ；
• 100px / 3 和 30px * 2 就是 ；
• 100px ， 3 ， 30px ， 2 就是 。

完整语法如下：

  = calc(  )
   = min( # )
   = max( # )
 = clamp( #{3} )
 =  [ [ '+' | '-' ]  ]*
 =  [ [ '*' | '/' ]  ]*
 =  |  |  | (  )

calc() 方法中一种类型，表示CSS数学计算函数内的整个计算表达式。

具体参见。

calc() 方法中一种类型，表示计算表达式中各个具体的计算项。

具体参见。

表示色值类型。这个类型值之前有文章专门深入介绍：“ CSS1-CSS3 颜色知识知多少？ ”

这里是概要：

颜色关键字

例如
'red' ,
'blue' 等。目前全部147个颜色关键字及对应颜色值参见这里。

transparent

transparent 关键字，例如：
color:transparent 。

currentColor

颜色变量。详见“
currentColor-CSS3超高校级好用CSS关键字 ”这篇文章。

RGB颜色

语法包括：
#RRGGBB[AA] ，
#RGB[A] ，
rgb[a](R, G, B[, A]) 以及
rgb[a](R G B[ / A]) （CSS Colors Level 4中新增）。

HSL颜色

语法包括：
hsl[a](H, S, L[, A]) ，以及CSS Colors Level 4中新增的
hsl[a](H S L[ / A]) 。

系统颜色

系统颜色关键字，不同操作系统以及不同操作系统主题下的具体表现的颜色是不一样的，因此不推荐在对外的产品中使用。

属于CSS Images Module Level中的类型值，表示颜色断点。

多出现在CSS渐变中，例如：

.zxx-gradient {
    background-image: linear-gradient(red 20%, blue 80%);
}

其中 red 20% 以及 blue 80% 就是 类型。

表示多个 的集合。

借用上面 的例子，其中 red 20%, blue 80% 就属于 。

数据类型表示用户定义的用作标识符的任意字符串。它是区分大小写的，并且在不同的上下文中禁止某些值以防止歧义。

例如CSS animation动画自定义的动画名称。

.zxx-animation {
    animation: fadeIn .2s;
}

上面的 fadeIn 就是 数据类型。

类似的还有CSS Counter计数器，例如：

.zxx-counter {
    counter-reset: zhangxinxuCom;
}

禁止的值

为了防止冲突，并不是所有的字符串都属于 ，例如CSS中的全局关键字值 unset , initial , inherit 以及 none 都是不允许的。还有 disc , circle , square , decimal 等 list-style-type 关键字值不允许， span 也不允许，因为为何grid布局中 grid-row-start ， grid-row-end ， grid-column-start ， grid-column-end 等属性冲突。

表示尺寸类型。由数字和单位构成，例如 666px 。

表示滤镜函数，被用在 filter （本身应用滤镜）和 backdrop-filter （本身不应用滤镜，后面元素应用）属性中。

该类型包括的值有：

blur()

模糊。

brightness()

亮度变化。

contrast()

对比度变化。

drop-shadow()

投影。

grayscale()

灰度。

hue-rotate()

色调旋转。

invert()

反相

opacity()

透明度变化。

saturate()

饱和度变化。

sepia()

褐色。

数据类型表示grid容器可伸缩的长度。被用在 grid-template-columns ， grid-template-rows 以及其他相关属性中。

该类型值格式固定，数字后面跟着单位 fr 。 fr 单位表示网格容器中剩余空间的份数。

例如：

1fr    /* 整数值 */
2.5fr  /* 小数值 */

关于Grid布局，可以参考我之前写的“ 写给自己看的display: grid布局教程 ”一文。

类型表示频率，跟着下面两种单位：

Hz

赫兹。例如：
0Hz ,
666Hz ,
23333Hz 。

kHz

千赫兹。例如：
0kHz ,
1.314kHz ,
5555kHz 。

目前还没有任何CSS属性支持 类型。

类型表示值既可以是 类型，又可以是 类型。

多用在 calc() 计算中。

表示渐变类型。

目前有4类渐变类型。分别是：

线性渐变

例如：

.linear-gradient {
    background: linear-gradient(#f69d3c, #3f87a6);
}

径向渐变

例如：

.radial-gradient {
    background: radial-gradient(#f69d3c, #3f87a6);
}

重复渐变

例如：

.repeating-linear-gradient {
    background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
}

.repeating-radial-gradient {
    background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
}

锥形渐变

例如：

.linear-gradient {
    background: conic-gradient(#f69d3c, #3f87a6);
}

是文本数据类型中CSS标识符，由一系列符合语法的字符组成。CSS属性接受两类标识符：预定义的关键字和作者定义的标识符。

注意： 不适用于属性值定义，应使用 。 为定义其他句法结构提供了便利。

目前没有CSS属性符合该类型。

CSS 数据类型表示二维图像。有两种图像：用 引用的普通图像和用 或 element() （文章介绍点这里）生成的动态图像。附加的CSS图像函数包括 image() （目前没有任何浏览器支持）, image-set() （根据屏幕指定不同图像）, 以及 cross-fade() （ 文章介绍点这里 ）。

数据类型可以被多种CSS属性使用，例如： background-image ， border-image ， content ， cursor ，以及 list-style-image 。

表示整数数值类型。用在 column-count ， counter-increment ， grid-column ， grid-row 以及 z-index 等CSS属性中。

一些旧的浏览器有最大值限制，例如IE最大2 ²⁰ -1，不过现在新的规则已经不在限定数值范围了。

下面这些值都是有效的：

12          正数
+123        正数带加号
-456        负数
0           零
+0          零，带加号
-0          零，带负号

下面这些值都是无效的：

12.0        类型，非类型，尽管表示的数值是相等的。
12.         小数点是不允许的。
+---12      只允许一个 +/- 负号。
ten         字母不允许。
_5          住字符不允许。
\35         Unicode转义字符不允许，虽然代表的就是整数（这里是5）。
\4E94       不允许使用非阿拉伯数字，即使转义形式。（这里是五）。
3e4         不允许使用科学符号。

类型表示距离值。这种类型被多个CSS属性使用，例如： width ， height ， margin ， padding ， border-width ， font-size ， text-shadow 等。

该类型包含非常多种类的单位。

相对长度单位

文字相关长度

cap
^实验

表示元素字体的“大写高度”（大写字母的名义高度）。

ch

字符
'0' （Unicode值是U+0030）所占据的宽度。关于
ch 单位实际应用，之前我
张鑫旭 www.zhangxinxu.com 有
写文章介绍过 。

em

表示元素的计算字体大小。如果用于字体大小属性本身，则表示元素的继承字体大小。

ex

表示元素当前的x-height，也就是字母
'x' 的高度。

ic
^实验

相当于“水”（CJK语言体系中水，U+6C34）这个字在当前字体中渲染的尺寸。

lh
^实验

相当于当前元素
line-height 属性的计算值，会转换为绝对长度单位。

rem

相对于根元素的字体大小。

rlh

相对于根元素的行高大小。

视区相关长度

vh

浏览器窗口视区1%的高度。

vw

浏览器窗口视区1%的宽度。

vi
^实验

根元素的内联轴（默认水平）的方向上的1%的初始包含块大小。

vb
^实验

根元素的块状轴（默认垂直）的方向上的1%的初始包含块大小。

vmin

等于
vh 和
vw 较小的值。

vmax

等于
vh 和
vw 较大的值。

绝对长度单位

px

对于屏幕显示，1像素通常表示一个设备像素（点）。然而，对于打印机和高分辨率屏幕，一个CSS像素意味着多个设备像素。1px=1英寸的1/96。

cm

厘米。
1cm = 96px/2.54

mm

毫米。
1mm = 1cm/10

Q
^实验

1/4毫米，也就是1/40厘米。

in

英寸。
1in = 2.54cm = 96px

pc

派卡。
1pc = 12pt = 1in/6

pt

点。
1pt = 1in/72

类型表示既能是长度值，也能是百分比值。

例如宽度width属性，技能是长度值，也能是百分比值。

.some-zxx-cl {
    width: 200px;
}
.some-zxx-cl {
    width: 20%;
}

因此，下面的 calc() 计算也是合法的，可解析的：

.by-鑫空间 {
    width: calc(100% - 200px);
}

类型表示值可以是整数也可以是小数。

该类型属性职业支持幂计算形式，例如：

10e3        科学记数法
-3.4e-2     复杂科学记数法

类型表示值既可以是 类型，又可以是 类型。

例如缩放：

.scale-zxx {
    transform: scale(1.5);
}
.scale-zxx {
    transform: scale(150%);
}

其中，scale()方法内的值就是 类型， 1.5 和 150% 作用一模一样。

是百分比值数据类型，通常相对于父辈元素对象进行计算。支持的CSS属性有： width ， height ， margin ， padding 以及 font-size 等。

.percentage-zxx {
    margin-left: 23%;
}

CSS 数据类型表示用于设置相对于元素框的位置的二维坐标。常用于 background-position 和 offset-anchor 属性中。

这个类型的值之前专门写文章详细介绍过：“ CSS 值简介并理解background百分比定位 ”。这里不赘述。

类型出现在CSS Generated Content Module规范文档中。表示引号，往往和语言相关。

语法如下：

 = open-quote | close-quote | no-open-quote | no-close-quote

“ content内容生成技术以及应用 ”这篇文章有详细介绍，可以示意下其中对应的CSS代码：

/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes: '"' '"';}
:lang(no) > q {quotes: "«" "»";}
:lang(ch) > q {quotes: "“" "”";}

/* 在q标签的前后插入引号 */
q:before {content: open-quote;}
q:after  {content: close-quote;}

其中出现的 open-quote 和 close-quote 就是 类型。

数据类型用来描述媒体查询中的纵横比，表示两个无单位值之间的比例。

例如：

/* 横纵比大于16:9的时候... */
@media screen and (min-aspect-ratio: 16/9) { ... }

数据类型用于描述媒体查询中的分辨率，表示输出设备的像素密度，即分辨率。

支持以下这些单位：

dpi

表示每英寸点数。屏幕通常每英寸包含72或96点，但打印文档的dpi通常要大得多。因为1英寸是2.54厘米，1dpi≈0.39 dpcm。IE9+浏览器支持。

dpcm

表示每厘米的点数。因为1英寸是2.54厘米，1dpcm≈2.54 dpi。IE9+浏览器支持。

dppx

表示每像素单位的点数。由于CSS in（英寸）与CSS px（像素）的1:96固定比率，1dppx相当于96dpi，对应于由
image-resolution 定义的CSS中显示的图像的默认分辨率。IE浏览器不支持，Edge12+支持。。

x

dppx 的别名。

使用示意：

/* 如果每英寸像素点大于300... */
@media print and (min-resolution: 300dpi) { ... }

数据类型源自CSS Shapes Module规范文档，与CSS shapes布局密切有关，关于CSS Shapes布局，不得不提我的这篇文章：“ 写给自己看的CSS shapes布局教程 ”，其中有介绍到 。

CSS shape-outside 属性语法是这样的：

shape-outside: none | [  ||  ] | 

（图形盒子）就是CSS2.1中的基本 模型的4种盒子，分别是 margin-box ， border-box ， padding-box 和 content-box 。要来指定文字环绕的时候是依照哪个盒子的边缘来计算的。

在CSS Shapes布局中，我们可以把形状指定为，其中圆形和椭圆中指定半径的参数就是 类型，标记：

circle() = circle( []? [at ]? )
ellipse() = ellipse( [{2}]? [at ]? )

类型本身语法如下：

 =  |  | closest-side | farthest-side

表示边角类型，主要用在线性渐变中。

语法为：

 = [left | right] || [top | bottom]

还可以使用to关键字指定方向，例如：

.zxx-gradient {
    background: linear-gradient(to right, deepskyblue, skyblue);
}

CSS 类型表示一系列的字符，字符数据类型在多个CSS属性中应用，如 content ， font-family 以及 quotes 等。

示意：

.by-author::before {
   content: '如果发现本文盗用，欢迎反馈给zhangxinxu';
}

.some-font {
   font-family: 'Microsoft Yahei';
}

是时间数据类型，多用在 animation ， transition 以及相关CSS属性中。

支持两个单位，如下：

s

秒。

ms

毫秒。1秒=1000毫秒。

数据类型，表示值是 类型或者 类型。

指时间函数类型，目前应用就是在CSS animation动画中的贝斯尔函数曲线，例如：

.timing-function {
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

数据类型表示切换数据类型，用在 toggle() 函数中（目前还没有浏览器支持），语法如下：

toggle( 

 # )

关于toggle()函数

这里多嘴举两个例子介绍下这个未来很可能出现的新函数。

下面的示例通常使元素变为斜体，但如果元素位于斜体内容中，则使它们变为正常样式：

em { font-style: toggle(italic, normal); }

ul { list-style-type: toggle(disc, circle, square, box); }

  
  
  
  


stock > * {
    display: block;
    width: attr(length em); /* 默认是0 */
    height: 1em;
    border: solid thin;
    margin: 0.5em;
}

color属性赋色

.attr-as-color {
    color: attr(data-color color);
}

header {
    background: url(zxx-banner.png) no-repeat top;
}

ul {
  list-style: square url(https://www.example.com/zxx-ball.png);
}

header {
    background: url(zxx-banner.png xxx) no-repeat top;
}

This specification does not define any s, but other specs may do so.