这本供网络开发人员使用的综合参考书列出了万维网联盟推荐的层叠样式表规范中规定的所有 CSS 属性。

以下是按字母顺序排列的所有 CSS 属性列表。

A

属性描述
accent-color 为用户界面上的控件设置高亮颜色。
align-content指定柔性线在柔性容器内沿横轴或网格块轴的分布方式。
align-items描述柔性容器内的对象应如何对齐。
align-self 定义柔性容器中选定对象的对齐方式。
all 重置除 unicode-bididirection 以外的所有属性。
animation在样式之间应用动画。
animation-delay 定义动画开始前的暂停。
animation-direction指定动画是以反向、正向还是交替循环的方式播放。
animation-duration指示动画完成一个循环所需的时间。
animation-fill-mode 定义在动画前后应用于目标元素的样式。
animation-iteration-count 定义动画应播放的次数。
animation-name 为 @keyframes 动画命名。
animation-play-state 指定动画是正在运行还是暂停。
animation-timing-function 提供动画的速度曲线规格。
aspect-ratio 定义元素所需的纵横比。

B

属性描述
backdrop-filter定义了元素背后空间的视觉效果。
backface-visibility指定在面向用户时是否显示元素的背面。
background所有背景样式属性的简写属性。
background-attachment决定背景图片是固定还是随页面滚动。
background-blend-mode设置背景图片相互混合以及与背景颜色混合的方式。
background-clip定义元素内背景的扩展。
background-color 定义元素背景的颜色。
background-image 设置元素的背景图片。
background-origin描述背景图片原点的位置。
background-position 设置背景图片的起始位置。
background-position-x 设置背景图像在 x 轴上的位置。
background-position-y 设置背景图像在 Y 轴上的位置。
background-repeat 确定是否以及如何重复背景图像。
background-size 定义背景图片的尺寸。
border设置元素的边框。
border-block 设置逻辑块边框属性值的快捷方式。
border-block-color定义块方向上开始和结束处的边框颜色。
border-block-end 用于设置逻辑块末端边框属性的快捷方式属性。
border-block-end-color 定义元素逻辑块末端边框的颜色。
border-block-end-style 定义元素逻辑块尾边框的样式。
border-block-end-width 定义元素逻辑块尾边框的宽度。
border-block-start 用于设置逻辑块开始边框属性的快捷方式属性。
border-block-start-color 定义元素逻辑块开始边框的颜色。
border-block-start-style 定义元素的逻辑块开始边框的样式。
border-block-start-width 定义元素的逻辑块开始边框的宽度。
border-block-style定义元素的逻辑块边框样式。
border-block-width 定义元素逻辑块边框的宽度。
border-bottom 简写属性设置元素的底部边框。
border-bottom-color 设置元素底部边框的颜色。
border-bottom-left-radius 圆元素的左下角。
border-bottom-right-radius包围元素的右下角。
border-bottom-style 设置底部边框的样式。
border-bottom-width 设置底部边框的宽度。
border-collapse指定表格的边框应分割还是折叠为单一边框。
border-color设置边框的颜色。
border-end-end-radius 在元素上定义逻辑边框半径。
border-end-start-radius 定义元素的逻辑边框半径。
border-image 为元素设置图像边框。
border-image-outset 定义边框图像区域超出边框框的范围。
border-image-repeat指定边框图像应拉伸、滚圆还是重复。
border-image-slice 将边框图像划分为多个区域。
border-image-source定义将用作边框的图像的路径。
border-image-width 设置边框图片的宽度。
border-inline设置单个逻辑内联边框属性值的简写属性。
border-inline-color 定义元素逻辑内联边框的颜色。
border-inline-end设置逻辑内行结束边框属性值的简写属性。
border-inline-end-color 设置逻辑内行末端边框的颜色。
border-inline-end-style设置逻辑内行结束边框的样式。
border-inline-end-width 设置逻辑内行结束边框的宽度。
border-inline-start用于设置逻辑内行开始边框属性值的快捷方式属性。
border-inline-start-color设置逻辑内行开始边框的颜色。
border-inline-start-style 设置逻辑内行开始边框的样式。
border-inline-start-width 设置逻辑内行开始边框的宽度。
border-inline-style 定义元素的逻辑内联边框的样式。
border-inline-end-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-start-end-radius定义元素上块开始边和内行结束边之间的逻辑边框半径。
border-start-start-radius在元素的块-起始边和内联-起始边之间定义逻辑边框半径。
border-style 设置元素边框四边的线条样式。
border-top 设置元素顶部边框所有属性的简写属性。
border-top-color 定义顶部边框的颜色。
border-bottom-left-radius对元素的左上角进行圆角处理。
border-top-right-radius包围元素的右上角。
border-top-style 设置元素顶部边框的线条样式。
border-top-width 设置元素顶部边框的宽度。
border-width 设置元素边框的宽度。
bottom设置元素的垂直位置。
box-decoration-break定义元素的边框和背景在页面中断时的行为方式,或者对于内联元素,在换行时的行为方式。
box-shadow 在元素周围添加阴影效果。
box-sizing设置元素总宽和总高的计算方式。
break-after定义给定元素后面是否应该有页面、列或区域中断。
break-before定义给定元素之前是否应出现区域、页面或列中断。
break-inside定义给定元素是否应在其内部设置分页、分栏或区域中断。

C

属性描述
caption-side定义表格标题的位置。
caret-color定义文本区域、输入字段和其他元素中可编辑光标(游标)的颜色。
@charset 提供有关样式表使用的字符编码的详细信息。
clear 定义浮动元素旁边元素的行为。
clip 剪切精确定位的元素。
clip-path创建一个剪切区域,设置要显示的元素部分。
color 定义文本的前景色。
column-count 定义元素应划分的列数。
column-fill 控制元素的内容并将其分成几列。
column-gap 定义列之间的间隙大小。
column-rule用于设置列间线条的颜色、样式和宽度的简写属性。
column-rule-color定义列间规则的颜色。
column-rule-style 定义列间规则的样式。
column-rule-width 定义规则在列之间的宽度。
column-span 定义元素跨列的列数。
column-width 定义列的宽度。
columns 设置列宽和列数的快捷属性。
content 使用生成的值替换内容。
counter-increment用于增加或减少已命名 CSS 计数器的值。
counter-reset创建已命名的 CSS 计数器,并为其初始化特定值。
counter-set 为 CSS 计数器设置给定值。
cursor定义指向项目时显示的鼠标指针。

D

属性描述
direction 设置文本、表格列和水平溢出的方向。
display 定义特定 HTML 元素的显示方法。

E

属性描述
empty-cells定义是否在表格中的空单元格上显示边框和背景。

F

属性描述
filter对元素应用图形效果。
flex简写属性,用于设置柔性项是增长还是收缩。
flex-basis定义柔性对象的起始长度。
flex-direction定义柔性元素在柔性容器中的方向。
flex-flow 用于指定柔性容器的方向和包装行为的快捷属性。
flex-grow 定义项目相对于其他项目的增长程度。
flex-shrink定义项目相对于其他项目的收缩程度。
flex-wrap 定义是否需要包裹柔性元素。
float 将元素放置在其容器的左侧或右侧。
font 用于设置所有字体相关属性的简写属性。
@font-face 允许网站下载和使用网络安全字体以外的字体的规则。
font-family 定义文本的字体家族。
font-feature-settings 为用户提供对 OpenType 字体复杂排版功能的控制。
font-kerning决定如何使用分隔信息,即字母之间的间距。
font-language-override决定字体中如何使用某种语言特有的字形。
font-size 确定文本的字体大小。
font-size-adjust 在字体回退时保持文本的可读性。
font-strech 选择字体的标准、浓缩或扩展面。
font-style 设置文本的字体样式。
font-synthesis确定浏览器是否应合成字体家族中缺少的样式。
font-variant 设置字体的所有字体变量。
font-variant-alternate 控制备用字形的使用。
font-variant-caps控制用于小写字母的备用字形的使用。
font-variant-east-asian控制用于东亚文字(如中文和日文)的替代字形的使用。
font-variant-ligatutes规范上下文形式和连字符的使用。
font-variant-numeric规范序号标记、分数和整数的不同字形的使用。
font-variant-position规定使用较小的备用字形作为上标或下标定位。
font-weight 指定字体的权重。

G

属性描述
gap设置行和列间隙的快捷方式属性。
grid 在一个声明中设置所有网格相关属性的快捷方式属性。
grid-area 简写属性,用于指定网格项在网格中的大小和位置。
grid-auto-columns 定义列的默认大小。
grid-auto-flow定义网格的自动放置项目插入流程。
grid-auto-rows 定义默认行大小。
grid-column 简写属性,指定网格项在网格列中的大小和位置。
grid-column-end 定义网格列中网格项的终点。
grid-column-start 定义网格列中网格项的起点。
grid-row 指定网格项在网格行中的大小和位置的简写属性。
grid-row-end 指定网格项在网格行中的终点。
grid-row-gap 以大小定义行间空隙。
grid-row-start 指定网格行中网格项的起始点。
grid-template指定与网格列、网格行和网格区域相关属性的简写属性。
grid-template-areas 定义已命名的网格项及其在显示列和行时的用途。
grid-template-columns 定义网格布局中列的数量和大小。
grid-template-rows 定义网格布局中行的大小。

H

属性描述
height定义元素的高度。
hyphens 定义如何分割单词以增强文本布局。
hyphenate-character设置行尾连字符前使用的字符。

I

属性描述
image-rendering定义要使用的图像缩放方法。
@import 方便将一个样式表导入另一个样式表。
inline-size 定义元素块的水平和垂直尺寸。
inset 指示元素与其父元素之间的距离。
inset-block 定义元素的逻辑块开始和结束偏移。
inset-block-end 定义元素的逻辑块结束偏移。
inset-block-start 定义元素的逻辑块起始偏移。
inset-inline 定义元素在内联方向上的逻辑起始和结束偏移。
inset-inline-end定义元素末端与其父元素之间在内联方向上的距离。
inset-inline-start定义元素的起点与其父元素之间在内联方向上的距离。
isolation定义元素是否必须创建新的堆叠内容。

J

属性描述
justify-content 定义在柔性和网格容器中内容项之间和周围的空间分配方式。
justify-items 定义网格元素在网格容器中应如何沿水平轴对齐。
justify-self定义网格项在网格容器中应如何沿内联方向对齐。

K

属性描述
@keyframes 为动画或过渡定义一组关键帧。

L

属性描述
left定义元素的水平位置。
letter-spacing 设置文本字符之间的水平间距。
line-break定义是否换行以及如何换行东亚脚本。
line-height 定义行框的高度。
list-style 简写属性,用于在单个声明中设置所有列表样式属性。
list-style-image 将图像设置为列表项标记。
list-style-position 设置标记在列表中的位置。
list-style-type 定义列表项标记的类型。

M

属性描述
margin设置元素四边边距的简写属性。
margin-block 定义元素逻辑块开始和结束边距的快捷方式属性。
margin-block-end 定义元素的逻辑块结束边距。
margin-block-start 定义元素的逻辑块起始边距。
margin-bottom设置元素底部的边距区域。
margin-block-start 定义元素的逻辑块起始边距。
margin-inline 定义元素的逻辑内联开始和结束边距。
margin-inline-end 定义元素的逻辑内联结束边距。
margin-inline-start 定义元素的逻辑内嵌页边距。
margin-left 设置元素左侧的边距区域。
margin-right 设置元素右侧的边距区域。
margin-top 设置元素顶部的边距。
mask 在特定点屏蔽或剪切图像,以隐藏元素(部分或全部)。
mask-clip 确定遮罩所覆盖的区域。
mask-composite 在执行合成操作后显示位于当前遮罩层下方的遮罩层。
mask-image 设置将用作元素遮罩层的图像。
mask-mode 定义 mask-image 提供的掩码参考应被视为亮度掩码还是 alpha 掩码。
mask-origin定义蒙版图像的原点。
mask-position定义屏蔽图像在元素中的位置。
mask-repeat 定义屏蔽图像在元素中的重复方式。
mask-size 使用屏蔽图像属性定义应用于元素的屏蔽图像的大小。
mask-type将 SVG <蒙版>元素设置为亮度或 alpha 蒙版。
max-height 设置元素高度的上限。
max-width设置元素宽度的上限。
@media 为特定媒体类型、设备和尺寸设置 CSS 样式规则。
max-block-size 设置元素的最大尺寸,其方向与其书写方向相反。
max-inline-size 定义元素块的水平或垂直最大尺寸。
min-block-size 根据元素的书写模式设置元素块的水平或垂直最小尺寸。
min-inline-size 定义元素块的最小水平或垂直尺寸。
min-height 设置元素高度的下限。
min-width 设置元素宽度的下限。
mix-blend-mode 定义元素内容与其父元素内容和元素背景的混合方式。

O

属性描述
object-fit定义图像或视频应如何调整大小或裁剪以适合其容器。
object-position 定义内容在具有定义尺寸的元素中的位置。
offset简写属性,使元素更容易沿特定路径生成动画。
offset-anchor定义元素在沿偏移路径移动的框内的移动位置。
offset-distance 定义元素沿偏移路径放置的位置。
offset-path 定义元素在父容器或 SVG 坐标系中的路径。
offset-rotate 定义元素沿指定偏移路径移动时的方向。
opacity 设置元素的透明度。
order 定义柔性项目在柔性容器中的显示顺序。
orphans定义页面、区域或列底部防止断开所需的最小行数。
outline 设置元素周围轮廓的宽度、颜色和样式。
outline-color 设置元素周围轮廓的颜色。
outline-offset 定义轮廓与元素边框边缘之间的空间。
outline-style 确定元素周围轮廓的样式。
outline-width 定义元素周围轮廓的宽度。
overflow 定义如何处理溢出其容器边界的内容。
overflow-anchor 提供了一种禁用浏览器滚动锚定行为的方法,该行为可调整滚动位置以减少内容移动。
overflow-wrap 允许浏览器将一行文本分割成一个不可断开的字符串,以防止内容溢出其容器。
overflow-clip-margin 定义内容在被剪切之前溢出元素框的距离。
overflow-x定义元素的内容将溢出到其左侧和右侧边距以及水平方向。
overflow-y 定义块级元素的内容超出元素的顶部和底部边缘时的显示方式。
overflow-block定义当元素的内容超出其方框的左右边界时的行为方式。
overflow-inline定义当溢出元素的内联边缘时溢出内容的显示方式。
overcroll-behavior 确定浏览器在到达滚动区域边界时的操作。
overcroll-behavior-block 确定浏览器在到达滚动区域的块方向边界时的行为。
overscroll-behavior-inline 决定当达到滚动区域的内联方向边界时浏览器的行为方式。
overscroll-behavior-x 确定当达到滚动区域的水平边界时浏览器的行为。
overcroll-behavior-y 确定当达到滚动区域的垂直边界时浏览器的操作。

P

属性描述
padding定义元素所有边的 padding 的简写属性。
padding-block确定元素的逻辑块开始和结束 padding。
padding-block-end 确定元素的逻辑块结束填充。
padding-block-start 设置元素底部 padding 的宽度。
padding-bottom 设置元素底部的填充宽度。
padding-inline 确定元素的逻辑内联开始和结束 padding。
padding-inline-end确定元素的逻辑内联结束padding。
padding-inline-start 用于创建自定义计数器样式。
padding-left设置元素左侧的填充空间。
padding-right设置元素右侧的填充空间。
padding-top 设置元素顶部的填充空间。
perspective-origin定义 z=0 平面与用户之间的距离。
perspective-origin 定义观看者/用户所看的位置。
place-content同时对齐块(列)和内联(行)轴中的内容。
place-items 同时沿块(列)和内联(行)轴对齐网格和 Flexbox 容器中的项目。
place-self同时沿块和内联方向对齐各个项目。
pointer-events 决定元素是否接收指针事件。
position定义元素在网页上的位置。

Q

属性描述
quotes定义嵌入式引号使用的引号样式。

R

属性描述
resize定义用户是否以及如何调整元素的大小。
right 控制元素的水平位置
rotate 定义元素旋转的方式。
row-gap 定义网格行之间的间隙。

S

属性描述
scale指定元素的缩放变换,与 transform 属性无关。
scroll-behavior 定义当用户点击链接或使用滚动条时浏览器滚动的流畅程度。
scroll-margin定义抓取区域内元素的边距。
scroll-margin-block 在块轴上定义滚动抓取区域边距的简写属性。
scroll-margin-block-end定义块轴末端滚动抓取区域的边距。
scroll-margin-block-start定义块轴开始时滚动快照区域的边距。
scroll-margin-bottom 定义滚动容器底部的边距。
scroll-margin-inline 设置元素在行(水平轴)维度上的滚动边距。
scroll-margin-inline-end 定义水平维度末端滚动快照区域的边距。
scroll-margin-inline-start 定义水平尺寸开始时滚动快照区域的边距。
scroll-margin-bottom 定义元素滚动快照区域的下边距。
scroll-margin-left 定义元素滚动抓取区域的左边距。
scroll-margin-top 定义元素滚动快照区域的上边距。
scroll-margin-right 定义元素滚动快照区域的右边距。
scroll-padding 定义滚动容器边缘和元素区域之间的滚动填充,滚动停止后,该填充将锁定到位。
scroll-padding-block 定义元素在块尺寸中的滚动衬垫。
scroll-padding-block-start 定义块维度中元素滚动填充起始边缘的偏移量。
scroll-padding-block-end 定义块维度中元素的滚动填充结束边缘的偏移量。
scroll-padding-bottom 定义元素滚动抓取区域的底部偏移。
scroll-padding-left 定义滚动容器左边缘与元素的滚动抓取区域之间的空间大小。
scroll-padding-right 定义滚动容器右边缘与元素的滚动抓取区域之间的空间大小。
scroll-padding-top 定义元素滚动抓取区域的顶部偏移。
scroll-padding-inline 定义元素在内联尺寸中的滚动填充。
scroll-padding-inline-start 以内联尺寸定义滚动端口起始边缘的偏移量。
scroll-padding-inline-end 以内联尺寸定义滚动端口末端边缘的偏移量。
scroll-snap-align定义在快照容器中如何定位快照元素。
scroll-snap-align决定滚动容器是滚动过去还是紧贴最近的快照位置。
scroll-snap-shot定义滚动容器如何抓取到抓取位置。
scrollbar-color 定义滚动条轨道和缩略图的颜色。
scrollbar-width 用于样式化滚动条轨道和缩略图的宽度。
scrollbar-gutter 它有助于为滚动条创建固定的空间。
shape-image-threshold使用形状-外部属性的图像时,指定形状提取的 alpha 通道阈值。
shape-margin定义指定 CSS 形状周围的边距。
shape-outside定义内联内容应包绕的形状。

T



属性描述
tab-size 定义元素中制表符字符的宽度。
table-layout 定义<表格>单元格、行和列的显示方式。
text-align 定义文本与页面边距的对齐方式。
text-align-last 设置块或行的最后一行(强制换行之前)的对齐方式。
text-combine-upright 定义如何将多个字符放入一个字符区域。
text-decoration 定义添加到文本中的装饰。
text-decoration-color 定义文本装饰的颜色。
text-decoration-line 用于为文本添加装饰线。
text-decoration-style 用于为文本装饰行添加样式。
text-decoration-thickness 用于为文本装饰行添加厚度。
text-emphasis 用于为文本添加强调的简写属性。
text-emphasis-color 用于设置文本周围强调标记的颜色。
text-emphasis-position 用于设置文本周围强调标记的位置。
text-emphasis-style 定义强调标记的外观。
text-indent 定义文本第一行的缩进。
text-orientation定义一行中文本字符的方向。
text-overflow 控制如何向用户显示隐藏的溢出内容。
text-shadow 用于为文本添加阴影效果。
text-transform 通过各种方式转换文本,从而改变文本的外观。
text-underline-offset 定义下划线文本装饰线与其初始位置的距离。
text-underline-position 定义下划线文本装饰的位置。
top 定义元素相对于其包含元素的垂直位置。
transform它适用于元素的旋转、缩放、倾斜或平移。
transform-box 定义与变换属性相关的布局框。
transform-origin 帮助设置元素变换的原点。
transform-style 定义嵌套项的三维空间渲染。
transition一个可作为每个过渡属性速记的属性。
transition-delay定义了启动过渡效果前的等待时间
transition-duration Defines the amount of time that a transition animation should take to complete.
transition-property定义应用过渡效果的 CSS 属性。
transition-timing-function 定义过渡效果的速度曲线。
translate 允许您沿 X、Y 和 Z 轴移动元素。

U

属性描述
unicode-bidi 控制文档中双向文本的显示方式。
user-select 决定用户是否可以选择文本。

V

属性描述
vertical-align 定义元素的垂直对齐方式。
visibilty定义是否需要在不改变文档布局的情况下显示或隐藏元素。

W

属性描述
white-space 定义元素中文本内部的空白区域。
Widows 定义页面或列顶部必须留出多少行。
width 定义元素内容区域的宽度。
word-break定义在单词超出元素可用宽度时应如何断开或包裹单词。
word-spacing定义文本中字与字之间的间距。
writing-mode定义文本应垂直还是水平显示。

Z

属性描述
z-index 控制网页中元素的堆叠顺序。