CSS3 属性

Created: October-16, 2018

以下部分包含 CSS3 属性的简要概述。

CSS 属性按字母顺序排序

本节包含属于最新 CSS3 规范的标准属性的完整列表。所有属性都按字母顺序列出。

属性	描述
`align-content`	指定 Flex 容器中灵活容器项的对齐方式。
`align-items`	指定 Flex 容器中项目的默认对齐方式。
`align-self`	指定 Flex 容器中所选项的对齐方式。
`animation`	指定基于关键帧的动画。
`animation-delay`	指定动画何时开始。
`animation-direction`	指定动画是否应在交替循环中反向播放。
`animation-duration`	指定动画完成一个循环所需的秒数或毫秒数。
`animation-fill-mode`	指定 CSS 动画在执行之前和之后应如何将样式应用于其目标。
`animation-iteration-count`	指定停止前应播放动画循环的次数。
`animation-name`	指定应应用于所选元素的已定义动画的名称。 `@keyframes`
`animation-play-state`	指定动画是运行还是暂停。
`animation-timing-function`	指定 CSS 动画在每个周期的持续时间内应如何进展。
`backface-visibility`	指定在面向用户时变换元素的“后”侧是否可见。
`background`	在一个声明中定义各种背景属性。
`background-attachment`	指定背景图像是在视区中固定还是滚动。
`background-clip`	指定背景的绘画区域。
`background-color`	定义元素的背景颜色。
`background-image`	定义元素的背景图像。
`background-origin`	指定背景图像的定位区域。
`background-position`	定义背景图像的原点。
`background-repeat`	指定是否/如何平铺背景图像。
`background-size`	指定背景图像的大小。
`border`	设置元素边框的所有四个边的宽度，样式和颜色。
`border-bottom`	设置元素底部边框的宽度，样式和颜色。
`border-bottom-color`	设置元素底部边框的颜色。
`border-bottom-left-radius`	定义元素左下角的形状。
`border-bottom-right-radius`	定义元素右下角的形状。
`border-bottom-style`	设置元素底部边框的样式。
`border-bottom-width`	设置元素底部边框的宽度。
`border-collapse`	指定表格单元格边框是连接还是分开。
`border-color`	设置元素所有四边的边框颜色。
`border-image`	指定如何使用图像代替边框样式。
`border-image-outset`	指定边框图像区域延伸到边框之外的量。
`border-image-repeat`	指定是否应重复，舍入或拉伸图像边框。
`border-image-slice`	指定图像边框的向内偏移。
`border-image-source`	指定要用作边框的图像的位置。
`border-image-width`	指定图像边框的宽度。
`border-left`	设置元素左边框的宽度，样式和颜色。
`border-left-color`	设置元素左边框的颜色。
`border-left-style`	设置元素左边框的样式。
`border-left-width`	设置元素左边框的宽度。
`border-radius`	定义元素边框角的形状。
`border-right`	设置元素右边框的宽度，样式和颜色。
`border-right-color`	设置元素右边框的颜色。
`border-right-style`	设置元素右边框的样式。
`border-right-width`	设置元素右边框的宽度。
`border-spacing`	设置相邻表格单元格边框之间的间距。
`border-style`	设置元素所有四边的边框样式。
`border-top`	设置元素顶部边框的宽度，样式和颜色。
`border-top-color`	设置元素顶部边框的颜色。
`border-top-left-radius`	定义元素左上角的形状。
`border-top-right-radius`	定义元素右上角的形状。
`border-top-style`	设置元素顶部边框的样式。
`border-top-width`	设置元素顶部边框的宽度。
`border-width`	设置元素所有四边的边框宽度。
`bottom`	指定定位元素底边的位置。
`box-shadow`	将一个或多个阴影应用于元素框。
`box-sizing`	更改默认的 CSS 框模型。
`caption-side`	指定表格标题的位置。
`clear`	指定元素相对于浮动元素的位置。
`clip`	定义剪裁区域。
`color`	指定元素文本的颜色。
`column-count`	指定多列元素中的列数。
`column-fill`	指定如何填充列。
`column-gap`	指定多列元素中列之间的间隔。
`column-rule`	指定要在多列元素中的每列之间绘制的直线或“规则”。
`column-rule-color`	指定多列布局中列之间绘制的规则的颜色。
`column-rule-style`	指定在多列布局中的列之间绘制的规则的样式。
`column-rule-width`	指定在多列布局中的列之间绘制的规则的宽度。
`column-span`	指定元素在多列布局中跨越的列数。
`column-width`	指定多列元素中列的最佳宽度。
`columns`	设置和属性的简写属性。 `column-width` `column-count`
`content`	插入生成的内容。
`counter-increment`	增加一个或多个计数器值。
`counter-reset`	创建或重置一个或多个计数器。
`cursor`	指定光标的类型。
`direction`	定义文本方向/书写方向。
`display`	指定元素在屏幕上的显示方式。
`empty-cells`	显示或隐藏空表格单元格的边框和背景。
`flex`	指定灵活长度的组件。
`flex-basis`	指定弹性项的初始主要大小。
`flex-direction`	指定灵活项的方向。
`flex-flow`	和属性的速记属性。 `flex-direction` `flex-wrap`
`flex-grow`	指定 Flex 项相对于 Flex 容器内其他项的增长方式。
`flex-shrink`	指定 flex 项相对于 Flex 容器内其他项的收缩方式。
`flex-wrap`	指定灵活项是否应该换行。
`float`	指定框是否应浮动。
`font`	在一个声明中定义各种字体属性。
`font-family`	定义元素的字体列表。
`font-size`	定义文本的字体大小。
`font-size-adjust`	发生字体回退时保留文本的可读性。
`font-stretch`	从字体中选择正常，浓缩或扩展的面。
`font-style`	定义文本的字体样式。
`font-variant`	指定字体变体。
`font-weight`	指定文本的字体粗细。
`height`	指定元素的高度。
`justify-content`	指定在解析任何弹性长度和自动边距后，如何沿 Flex 容器的主轴对齐 Flex 项目。
`left`	指定定位元素左边缘的位置。
`letter-spacing`	设置字母之间的额外间距。
`line-height`	设置文本行之间的高度。
`list-style`	定义列表和列表元素的显示样式。
`list-style-image`	指定要用作列表项标记的图像。
`list-style-position`	指定列表项标记的位置。
`list-style-type`	指定列表项的标记样式。
`margin`	设置元素所有四边的边距。
`margin-bottom`	设置元素的下边距。
`margin-left`	设置元素的左边距。
`margin-right`	设置元素的右边距。
`margin-top`	设置元素的上边距。
`max-height`	指定元素的最大高度。
`max-width`	指定元素的最大宽度。
`min-height`	指定元素的最小高度。
`min-width`	指定元素的最小宽度。
`opacity`	指定元素的透明度。
`order`	指定 Flex 项目在 Flex 容器中的显示和布局顺序。
`outline`	设置元素轮廓的所有四个边的宽度，样式和颜色。
`outline-color`	设置轮廓的颜色。
`outline-offset`	设置轮廓和元素边框边缘之间的间距。
`outline-style`	设置轮廓的样式。
`outline-width`	设置轮廓的宽度。
`overflow`	指定处理溢出元素框的内容。
`overflow-x`	指定处理水平溢出元素框的内容。
`overflow-y`	指定垂直溢出元素框的内容的处理。
`padding`	在元素的所有四个边上设置填充。
`padding-bottom`	将填充设置为元素的底部。
`padding-left`	将填充设置为元素的左侧。
`padding-right`	将填充设置为元素的右侧。
`padding-top`	将填充设置为元素的顶部。
`page-break-after`	在元素后插入分页符。
`page-break-before`	在元素前插入分页符。
`page-break-inside`	在元素内插入分页符。
`perspective`	定义从中查看对象的所有子元素的透视图。
`perspective-origin`	定义透视属性的原点（3D 空间的消失点）。
`position`	指定元素的定位方式。
`quotes`	指定嵌入式引用的引号。
`resize`	指定用户是否可以调整元素的大小。
`right`	指定定位元素右边缘的位置。
`tab-size`	指定制表符的长度。
`table-layout`	指定表布局算法。
`text-align`	设置内联内容的水平对齐方式。
`text-align-last`	指定如何当一个块的强制断行前的最后行或行权一致的。 `text-align` `justify`
`text-decoration`	指定添加到文本的装饰。
`text-decoration-color`	指定的颜色。 `text-decoration-line`
`text-decoration-line`	指定向元素添加哪种线条装饰。
`text-decoration-style`	指定属性指定的行的样式 `text-decoration-line`
`text-indent`	缩进第一行文字。
`text-justify`	指定在属性设置为时使用的对齐方法。 `text-align` `justify`
`text-overflow`	指定文本内容溢出块容器时的显示方式。
`text-shadow`	将一个或多个阴影应用于元素的文本内容。
`text-transform`	改变文本的大小写。
`top`	指定定位元素顶边的位置。
`transform`	对元素应用 2D 或 3D 变换。
`transform-origin`	定义元素的转换原点。
`transform-style`	指定嵌套元素在 3D 空间中的呈现方式。
`transition`	定义元素的两个状态之间的转换。
`transition-delay`	指定过渡效果何时开始。
`transition-duration`	指定转换效果完成所需的秒数或毫秒数。
`transition-property`	指定应应用过渡效果的 CSS 属性的名称。
`transition-timing-function`	指定过渡效果的速度曲线。
`vertical-align`	设置元素相对于当前文本基线的垂直位置。
`visibility`	指定元素是否可见。
`white-space`	指定如何处理元素内的空白区域。
`width`	指定元素的宽度。
`word-break`	指定如何在单词中断行。
`word-spacing`	设置单词之间的间距。
`word-wrap`	指定当内容溢出其容器边界时是否中断单词。
`z-index`	指定定位元素的分层或堆叠顺序。

本节包含属于最新 CSS3 规范的标准属性的完整列表。所有属性都按类别分组。

动画属性

属性	描述
`animation`	指定基于关键帧的动画。
`animation-delay`	指定动画何时开始。
`animation-direction`	指定动画是否应在交替循环中反向播放。
`animation-duration`	指定动画完成一个循环所需的秒数或毫秒数。
`animation-fill-mode`	指定 CSS 动画在执行之前和之后应如何将样式应用于其目标。
`animation-iteration-count`	指定停止前应播放动画循环的次数。
`animation-name`	指定应应用于所选元素的已定义动画的名称。 `@keyframes`
`animation-play-state`	指定动画是运行还是暂停。
`animation-timing-function`	指定 CSS 动画在每个周期的持续时间内应如何进展。

背景属性

属性	描述
`background`	在一个声明中定义各种背景属性。
`background-attachment`	指定背景图像是在视区中固定还是滚动。
`background-clip`	指定背景的绘画区域。
`background-color`	定义元素的背景颜色。
`background-image`	定义元素的背景图像。
`background-origin`	指定背景图像的定位区域。
`background-position`	定义背景图像的原点。
`background-repeat`	指定是否/如何平铺背景图像。
`background-size`	指定背景图像的大小。

边界属性

属性	描述
`border`	设置元素边框的所有四个边的宽度，样式和颜色。
`border-bottom`	设置元素底部边框的宽度，样式和颜色。
`border-bottom-color`	设置元素底部边框的颜色。
`border-bottom-left-radius`	定义元素左下角的形状。
`border-bottom-right-radius`	定义元素右下角的形状。
`border-bottom-style`	设置元素底部边框的样式。
`border-bottom-width`	设置元素底部边框的宽度。
`border-color`	设置元素所有四边的边框颜色。
`border-image`	指定如何使用图像代替边框样式。
`border-image-outset`	指定边框图像区域延伸到边框之外的量。
`border-image-repeat`	指定是否应重复，舍入或拉伸图像边框。
`border-image-slice`	指定图像边框的向内偏移。
`border-image-source`	指定要用作边框的图像的位置。
`border-image-width`	指定图像边框的宽度。
`border-left`	设置元素左边框的宽度，样式和颜色。
`border-left-color`	设置元素左边框的颜色。
`border-left-style`	设置元素左边框的样式。
`border-left-width`	设置元素左边框的宽度。
`border-radius`	定义元素边框角的形状。
`border-right`	设置元素右边框的宽度，样式和颜色。
`border-right-color`	设置元素右边框的颜色。
`border-right-style`	设置元素右边框的样式。
`border-right-width`	设置元素右边框的宽度。
`border-style`	设置元素所有四边的边框样式。
`border-top`	设置元素顶部边框的宽度，样式和颜色。
`border-top-color`	设置元素顶部边框的颜色。
`border-top-left-radius`	定义元素左上角的形状。
`border-top-right-radius`	定义元素右上角的形状。
`border-top-style`	设置元素顶部边框的样式。
`border-top-width`	设置元素顶部边框的宽度。
`border-width`	设置元素所有四边的边框宽度。

颜色属性

属性	描述
`color`	指定元素文本的颜色。
`opacity`	指定元素的透明度。

尺寸属性

属性	描述
`height`	指定元素的高度。
`max-height`	指定元素的最大高度。
`max-width`	指定元素的最大宽度。
`min-height`	指定元素的最小高度。
`min-width`	指定元素的最小宽度。
`width`	指定元素的宽度。

生成的内容属性

属性	描述
`content`	插入生成的内容。
`quotes`	指定嵌入式引用的引号。
`counter-reset`	创建或重置一个或多个计数器。
`counter-increment`	增加一个或多个计数器值。

灵活的盒子布局

属性	描述
`align-content`	指定 Flex 容器中灵活容器项的对齐方式。
`align-items`	指定 Flex 容器中项目的默认对齐方式。
`align-self`	指定 Flex 容器中所选项的对齐方式。
`flex`	指定灵活长度的组件。
`flex-basis`	指定弹性项的初始主要大小。
`flex-direction`	指定灵活项的方向。
`flex-flow`	和属性的速记属性。 `flex-direction` `flex-wrap`
`flex-grow`	指定 Flex 项相对于 Flex 容器内其他项的增长方式。
`flex-shrink`	指定 flex 项相对于 Flex 容器内其他项的收缩方式。
`flex-wrap`	指定灵活项是否应该换行。
`justify-content`	指定在解析任何弹性长度和自动边距后，如何沿 Flex 容器的主轴对齐 Flex 项目。
`order`	指定 Flex 项目在 Flex 容器中的显示和布局顺序。

字体属性

属性	描述
`font`	在一个声明中定义各种字体属性。
`font-family`	定义元素的字体列表。
`font-size`	定义文本的字体大小。
`font-size-adjust`	发生字体回退时保留文本的可读性。
`font-stretch`	从字体中选择正常，浓缩或扩展的面。
`font-style`	定义文本的字体样式。
`font-variant`	指定字体变体。
`font-weight`	指定文本的字体粗细。

列表属性

属性	描述
`list-style`	定义列表和列表元素的显示样式。
`list-style-image`	指定要用作列表项标记的图像。
`list-style-position`	指定列表项标记的位置。
`list-style-type`	指定列表项的标记样式。

保证金属性

属性	描述
`margin`	设置元素所有四边的边距。
`margin-bottom`	设置元素的下边距。
`margin-left`	设置元素的左边距。
`margin-right`	设置元素的右边距。
`margin-top`	设置元素的上边距。

多列布局属性

属性	描述
`column-count`	指定多列元素中的列数。
`column-fill`	指定如何填充列。
`column-gap`	指定多列元素中列之间的间隔。
`column-rule`	指定要在多列元素中的每列之间绘制的直线或“规则”。
`column-rule-color`	指定多列布局中列之间绘制的规则的颜色。
`column-rule-style`	指定在多列布局中的列之间绘制的规则的样式。
`column-rule-width`	指定在多列布局中的列之间绘制的规则的宽度。
`column-span`	指定元素在多列布局中跨越的列数。
`column-width`	指定多列元素中列的最佳宽度。
`columns`	设置和属性的简写属性。 `column-width` `column-count`

轮廓属性

属性	描述
`outline`	设置元素轮廓的所有四个边的宽度，样式和颜色。
`outline-color`	设置轮廓的颜色。
`outline-offset`	设置轮廓和元素边框边缘之间的间距。
`outline-style`	设置轮廓的样式。
`outline-width`	设置轮廓的宽度。

填充属性

属性	描述
`padding`	在元素的所有四个边上设置填充。
`padding-bottom`	将填充设置为元素的底部。
`padding-left`	将填充设置为元素的左侧。
`padding-right`	将填充设置为元素的右侧。
`padding-top`	将填充设置为元素的顶部。

打印属性

属性	描述
`page-break-after`	在元素后插入分页符。
`page-break-before`	在元素前插入分页符。
`page-break-inside`	在元素内插入分页符。

表格属性

属性	描述
`border-collapse`	指定表格单元格边框是连接还是分开。
`border-spacing`	设置相邻表格单元格边框之间的间距。
`caption-side`	指定表格标题的位置。
`empty-cells`	显示或隐藏空表格单元格的边框和背景。
`table-layout`	指定表布局算法。

文字属性

属性	描述
`direction`	定义文本方向/书写方向。
`tab-size`	指定制表符的长度。
`text-align`	设置内联内容的水平对齐方式。
`text-align-last`	指定如何当一个块的强制断行前的最后行或行权一致的。 `text-align` `justify`
`text-decoration`	指定添加到文本的装饰。
`text-decoration-color`	指定的颜色。 `text-decoration-line`
`text-decoration-line`	指定向元素添加哪种线条装饰。
`text-decoration-style`	指定属性指定的行的样式 `text-decoration-line`
`text-indent`	缩进第一行文字。
`text-justify`	指定在属性设置为时使用的对齐方法。 `text-align` `justify`
`text-overflow`	指定文本内容溢出块容器时的显示方式。
`text-shadow`	将一个或多个阴影应用于元素的文本内容。
`text-transform`	改变文本的大小写。
`line-height`	设置文本行之间的高度。
`vertical-align`	设置元素相对于当前文本基线的垂直位置。
`letter-spacing`	设置字母之间的额外间距。
`word-spacing`	设置单词之间的间距。
`white-space`	指定如何处理元素内的空白区域。
`word-break`	指定如何在单词中断行。
`word-wrap`	指定当内容溢出其容器边界时是否中断单词。

变换属性

属性	描述
`backface-visibility`	指定在面向用户时变换元素的“后”侧是否可见。
`perspective`	定义从中查看对象的所有子元素的透视图。
`perspective-origin`	定义透视属性的原点（3D 空间的消失点）。
`transform`	对元素应用 2D 或 3D 变换。
`transform-origin`	定义元素的转换原点。
`transform-style`	指定嵌套元素在 3D 空间中的呈现方式。

过渡属性

属性	描述
`transition`	定义元素的两个状态之间的转换。
`transition-delay`	指定过渡效果何时开始。
`transition-duration`	指定转换效果完成所需的秒数或毫秒数。
`transition-property`	指定应应用过渡效果的 CSS 属性的名称。
`transition-timing-function`	指定过渡效果的速度曲线。

可视格式化属性

属性	描述
`display`	指定元素在屏幕上的显示方式。
`position`	指定元素的定位方式。
`top`	指定定位元素顶边的位置。
`right`	指定定位元素右边缘的位置。
`bottom`	指定定位元素底边的位置。
`left`	指定定位元素左边缘的位置。
`float`	指定框是否应浮动。
`clear`	指定元素相对于浮动元素的位置。
`z-index`	指定定位元素的分层或堆叠顺序。
`overflow`	指定处理溢出元素框的内容。
`overflow-x`	指定在内容溢出元素内容区域宽度时如何管理内容。
`overflow-y`	指定在内容溢出元素内容区域的高度时如何管理内容。
`resize`	指定用户是否可以调整元素的大小。
`clip`	定义剪裁区域。
`visibility`	指定元素是否可见。
`cursor`	指定光标的类型。
`box-shadow`	将一个或多个阴影应用于元素框。
`box-sizing`	更改默认的 CSS 框模型。