CSS 参考
CSS 属性
A
accent-color | 为用户界面控件指定强调色 |
align-content | 当项目未占用所有可用空间时,指定灵活容器内各行之间的对齐方式 |
align-items | 指定灵活容器内项目的对齐方式 |
align-self | 指定灵活容器内选中项目的对齐方式 |
all | 重置所有属性(除 unicode-bidi 和 direction 外) |
animation | 所有 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-* 属性的简写属性 |
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 | 指定背景图像的大小 |
block-size | 指定元素在块方向上的大小 |
border | border-width, border-style 和 border-color 的简写属性 |
border-block | border-block-width, border-block-style 和 border-block-color 的简写属性 |
border-block-color | 设置块方向开始和结束处的边框颜色 |
border-block-end | border-block-end-width, border-block-end-style 和 border-block-end-color 的简写属性 |
border-block-end-color | 设置块方向结束处的边框颜色 |
border-block-end-style | 设置块方向结束处的边框样式 |
border-block-end-width | 设置块方向结束处的边框宽度 |
border-block-start | border-block-start-width, border-block-start-style 和 border-block-start-color 的简写属性 |
border-block-start-color | 设置块方向开始处的边框颜色 |
border-block-start-style | 设置块方向开始处的边框样式 |
border-block-start-width | 设置块方向开始处的边框宽度 |
border-block-style | 设置块方向开始和结束处的边框样式 |
border-block-width | 设置块方向开始和结束处的边框宽度 |
border-bottom | border-bottom-width, border-bottom-style 和 border-bottom-color 的简写属性 |
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-* 属性的简写属性 |
border-image-outset | 指定边框图像区域超出边框框的距离 |
border-image-repeat | 指定边框图像是否重复、圆角或拉伸 |
border-image-slice | 指定如何切片边框图像 |
border-image-source | 指定用作边框的图像的路径 |
border-image-width | 指定边框图像的宽度 |
border-inline | border-inline-width, border-inline-style 和 border-inline-color 的简写属性 |
border-inline-color | 设置内联方向开始和结束处的边框颜色 |
border-inline-end | border-inline-end-width, border-inline-end-style 和 border-inline-end-color 的简写属性 |
border-inline-end-color | 设置内联方向结束处的边框颜色 |
border-inline-end-style | 设置内联方向结束处的边框样式 |
border-inline-end-width | 设置内联方向结束处的边框宽度 |
border-inline-start | border-inline-start-width, border-inline-start-style 和 border-inline-start-color 的简写属性 |
border-inline-start-color | 设置内联方向开始处的边框颜色 |
border-inline-start-style | 设置内联方向开始处的边框样式 |
border-inline-start-width | 设置内联方向开始处的边框宽度 |
border-inline-style | 设置内联方向开始和结束处的边框样式 |
border-inline-width | 设置内联方向开始和结束处的边框宽度 |
border-left | 所有 border-left-* 属性的简写属性 |
border-left-color | 设置左边框的颜色 |
border-left-style | 设置左边框的样式 |
border-left-width | 设置左边框的宽度 |
border-radius | 四个 border-*-radius 属性的简写属性 |
border-right | 所有 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-width, border-top-style 和 border-top-color 的简写属性 |
border-top-color | 设置顶部边框的颜色 |
border-top-left-radius | 定义左上角边框的圆角半径 |
border-top-right-radius | 定义右上角边框的圆角半径 |
border-top-style | 设置顶部边框的样式 |
border-top-width | 设置顶部边框的宽度 |
border-width | 设置四个边框的宽度 |
bottom | 设置元素相对于其父元素底部的定位 |
box-decoration-break | 设置元素在分页符处或内联元素在换行符处的背景和边框行为。 |
box-reflect | box-reflect 属性用于创建元素的反射。 |
box-shadow | 为元素附加一个或多个阴影 |
box-sizing | 定义元素的宽度和高度的计算方式:是否应包含内边距和边框 |
break-after | 指定在指定元素之后是否应出现分页符、分栏符或分区域符 |
break-before | 指定在指定元素之前是否应出现分页符、分栏符或分区域符 |
break-inside | 指定在指定元素内部是否应出现分页符、分栏符或分区域符 |
C
caption-side | 指定表格标题的放置位置 |
caret-color | 指定输入框、文本区域或任何可编辑元素中的光标(插入符号)的颜色 |
@charset | 指定样式表中使用的字符编码 |
clear | 指定浮动元素旁边的元素应如何处理 |
clip | 已弃用,请使用 clip-path。剪切绝对定位的元素 |
clip-path | 将元素剪切为基本形状或 SVG 源 |
color | 设置文本的颜色 |
color-scheme | 指示元素应使用哪种操作系统配色方案进行渲染 |
column-count | 指定元素应划分的列数 |
column-fill | 指定如何填充列,平衡或不平衡 |
column-gap | 指定列之间的间隙 |
column-rule | 所有 column-rule-* 属性的简写属性 |
column-rule-color | 指定列之间规则的颜色 |
column-rule-style | 指定列之间规则的样式 |
column-rule-width | 指定列之间规则的宽度 |
column-span | 指定元素应跨越多少列 |
column-width | 指定列宽 |
columns | column-width 和 column-count 的简写属性 |
content | 与 :before 和 :after 伪元素一起使用,以插入生成的內容 |
counter-increment | 增加或减少一个或多个 CSS 计数器的值 |
counter-reset | 创建或重置一个或多个 CSS 计数器 |
counter-set | 创建或设置一个或多个 CSS 计数器 |
cursor | 指定将鼠标悬停在元素上时显示的鼠标光标 |
D
direction | 指定文本方向/书写方向 |
display | 指定某个 HTML 元素应该如何显示 |
E
empty-cells | 指定表格中空单元格是否显示边框和背景 |
F
filter | 在元素显示之前定义元素的效果(例如模糊或颜色偏移) |
flex | flex-grow、flex-shrink 和 flex-basis 属性的简写属性 |
flex-basis | 指定弹性项目的初始长度 |
flex-direction | 指定弹性项目的排列方向 |
flex-flow | flex-direction 和 flex-wrap 属性的简写属性 |
flex-grow | 指定项目相对于其他项目增长多少 |
flex-shrink | 指定项目相对于其他项目收缩多少 |
flex-wrap | 指定弹性项目是否应该换行 |
float | 指定元素应该浮动到左边、右边还是不浮动 |
font | font-style、font-variant、font-weight、font-size/line-height 和 font-family 属性的简写属性 |
@font-face | 允许网站下载和使用除“网络安全”字体之外的其他字体 |
font-family | 指定文本的字体系列 |
font-feature-settings | 允许控制 OpenType 字体中的高级排版功能 |
@font-feature-values | 允许作者在 font-variant-alternate 中使用通用名称,以激活 OpenType 中以不同方式激活的功能 |
font-kerning | 控制字距调整信息(字母之间的间距)的使用 |
font-language-override | 控制字体的语言特定字形的用法 |
font-size | 指定文本的字体大小 |
font-size-adjust | 在出现备用字体时保持文本的可读性和大小 |
font-stretch | 从字体系列中选择普通、压缩或扩展面 |
font-style | 指定文本的字体样式 |
font-synthesis | 控制浏览器可以合成哪些缺失的字体(粗体或斜体) |
font-variant | 指定文本是否应该以小写字母字体显示 |
font-variant-alternates | 控制在 @font-feature-values 中定义的替代名称相关的替代字形的用法 |
font-variant-caps | 控制大写字母替代字形的用法 |
font-variant-east-asian | 控制东亚文字(例如日语和中文)替代字形的用法 |
font-variant-ligatures | 控制应用于元素的文本内容中使用哪些连字和上下文形式 |
font-variant-numeric | 控制数字、分数和序数标记的替代字形的用法 |
font-variant-position | 控制更小的尺寸的替代字形的用法,这些字形相对于字体的基线定位为上标或下标 |
font-weight | 指定字体的粗细 |
G
gap | row-gap 和 column-gap 属性的简写属性 |
grid | grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 属性的简写属性 |
grid-area | 指定网格项目的名称,或者该属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性 |
grid-auto-columns | 指定默认的列大小 |
grid-auto-flow | 指定如何将自动放置的项目插入网格中 |
grid-auto-rows | 指定默认的行大小 |
grid-column | grid-column-start 和 grid-column-end 属性的简写属性 |
grid-column-end | 指定网格项目在哪里结束 |
grid-column-start | 指定网格项目在哪里开始 |
grid-row | grid-row-start 和 grid-row-end 属性的简写属性 |
grid-row-end | 指定网格项目在哪里结束 |
grid-row-start | 指定网格项目在哪里开始 |
grid-template | grid-template-rows、grid-template-columns 和 grid-areas 属性的简写属性 |
grid-template-areas | 使用命名的网格项目来指定如何显示列和行 |
grid-template-columns | 指定列的大小以及网格布局中的列数 |
grid-template-rows | 指定网格布局中行的尺寸 |
H
hanging-punctuation | 指定标点符号是否可以放置在线框之外 |
height | 设置元素的高度 |
hyphens | 设置如何分割单词以改善文本布局 |
hypenate-character | 设置在换行符之前使用的字符 |
I
image-rendering | 指定用于图像缩放的算法类型 |
@import | 允许将样式表导入另一个样式表 |
initial-letter | 指定首字母的大小,以及首字母应该下沉的行数(在文本中下沉) |
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-inline | 指定内联方向上的边距 |
margin-inline-end | 指定内联方向上的末尾边距 |
margin-inline-start | 指定内联方向上的开头边距 |
margin-left | 设置元素的左侧边距 |
margin-right | 设置元素的右侧边距 |
margin-top | 设置元素的顶部边距 |
marker | 指向将在元素路径的所有顶点(第一个、中间和最后一个)上绘制的标记 |
marker-end | 指向将在元素路径的最后一个顶点上绘制的标记 |
marker-mid | 指向将在元素路径的所有中间顶点上绘制的标记 |
marker-start | 指向将在元素路径的第一个顶点上绘制的标记 |
mask | mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size 和 mask-composite 的简写属性 |
mask-clip | 指定受蒙版图像影响的区域 |
mask-composite | 指定在当前蒙版层上与其下方的蒙版层一起使用的合成操作 |
mask-image | 指定用作元素的蒙版层的图像 |
mask-mode | 指定蒙版层图像是否被视为亮度蒙版或 alpha 蒙版 |
mask-origin | 指定蒙版层图像的原点位置(蒙版位置区域) |
mask-position | 设置蒙版层图像的起始位置(相对于蒙版位置区域) |
mask-repeat | 指定如何重复蒙版层图像 |
mask-size | 指定蒙版层图像的大小 |
mask-type | 指定 SVG <mask> 元素是否被视为亮度蒙版或 alpha 蒙版 |
max-height | 设置元素的最大高度 |
max-width | 设置元素的最大宽度 |
@media | 为不同的媒体类型/设备/大小设置样式规则 |
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、offset-position 和 offset-rotate 属性的简写属性 |
offset-anchor | 指定固定在其沿其动画的路径的元素上的一个点 |
offset-distance | 指定沿路径放置动画元素的位置 |
offset-path | 指定元素沿其动画的路径 |
offset-position | 指定元素沿路径的初始位置 |
offset-rotate | 指定元素沿路径动画时的旋转 |
opacity | 设置元素的不透明度级别 |
order | 设置弹性项目的顺序,相对于其他项目 |
orphans | 设置页面或列底部必须保留的最小行数 |
outline | outline-width、outline-style 和 outline-color 属性的简写属性 |
outline-color | 设置轮廓的颜色 |
outline-offset | 偏移轮廓,并在边框边缘之外绘制 |
outline-style | 设置轮廓的样式 |
outline-width | 设置轮廓的宽度 |
overflow |
指定如果内容超出元素的框会发生什么 |
overflow-anchor |
指定当在可滚动容器中加载新内容时,是否应将可见区域中的内容向下推。 |
overflow-wrap | 指定如果长单词溢出容器,浏览器是否可以换行。 |
overflow-x | 指定如果内容溢出元素的内容区域,是否裁剪内容的左右边缘。 |
overflow-y | 指定如果内容溢出元素的内容区域,是否裁剪内容的上下边缘。 |
overscroll-behavior | 指定在 x 和 y 方向上是否具有滚动链接或过度滚动余量。 |
overscroll-behavior-block | 指定在块方向上是否具有滚动链接或过度滚动余量。 |
overscroll-behavior-inline | 指定在内联方向上是否具有滚动链接或过度滚动余量。 |
overscroll-behavior-x | 指定在 x 方向上是否具有滚动链接或过度滚动余量。 |
overscroll-behavior-y | 指定在 y 方向上是否具有滚动链接或过度滚动余量。 |
P
padding | 所有 padding-* 属性的简写属性。 |
padding-block | 指定块方向的填充。 |
padding-block-end | 指定块方向末尾的填充。 |
padding-block-start | 指定块方向开始处的填充。 |
padding-bottom | 设置元素的底部填充。 |
padding-inline | 指定内联方向的填充。 |
padding-inline-end | 指定内联方向末尾的填充。 |
padding-inline-start | 指定内联方向开始处的填充。 |
padding-left | 设置元素的左侧填充。 |
padding-right | 设置元素的右侧填充。 |
padding-top | 设置元素的顶部填充。 |
page-break-after | 设置元素后的分页行为。已由 break-after 属性取代。 |
page-break-before | 设置元素之前的分页行为。已由 break-before 属性取代。 |
page-break-inside | 设置元素内部的分页行为。已由 break-inside 属性取代。 |
paint-order | 设置 SVG 元素或文本的绘制顺序。 |
perspective | 为三维定位的元素提供透视效果。 |
perspective-origin | 定义用户从哪个位置查看三维定位的元素。 |
place-content | 为 Flexbox 和网格布局指定 align-content 和 justify-content 属性值。 |
place-items | 为网格布局指定 align-items 和 justify-items 属性值。 |
place-self | 为网格布局指定 align-self 和 justify-self 属性值。 |
pointer-events | 定义元素是否响应指针事件。 |
position | 指定用于元素的定位方法类型(静态、相对、绝对或固定)。 |
@property | 在样式表中直接定义自定义 CSS 属性,无需运行任何 JavaScript。 |
Q
quotes | 设置嵌入引文的引号类型。 |
R
resize | 定义元素是否(以及如何)可由用户调整大小。 |
right | 指定定位元素的右侧位置。 |
rotate | 指定元素的旋转。 |
row-gap | 指定网格行之间的间隙。 |
S
scale | 通过放大或缩小指定元素的大小。 |
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-left | 指定左侧捕捉位置和容器之间的边距。 |
scroll-margin-right | 指定右侧捕捉位置和容器之间的边距。 |
scroll-margin-top | 指定顶部捕捉位置和容器之间的边距。 |
scroll-padding | 指定容器到子元素捕捉位置的距离。 |
scroll-padding-block | 指定容器到子元素捕捉位置在块方向上的距离。 |
scroll-padding-block-end | 指定容器末尾到子元素捕捉位置在块方向上的距离。 |
scroll-padding-block-start | 指定容器开始到子元素捕捉位置在块方向上的距离。 |
scroll-padding-bottom | 指定容器底部到子元素捕捉位置的距离。 |
scroll-padding-inline | 指定容器到子元素捕捉位置在内联方向上的距离。 |
scroll-padding-inline-end | 指定容器末尾到子元素捕捉位置在内联方向上的距离。 |
scroll-padding-inline-start | 指定容器开始到子元素捕捉位置在内联方向上的距离。 |
scroll-padding-left | 指定容器左侧到子元素捕捉位置的距离。 |
scroll-padding-right | 指定容器右侧到子元素捕捉位置的距离。 |
scroll-padding-top | 指定容器顶部到子元素捕捉位置的距离。 |
scroll-snap-align | 指定用户停止滚动时元素的位置。 |
scroll-snap-stop | 指定在触控板或触摸屏上快速滑动后的滚动行为。 |
scroll-snap-type | 指定滚动时捕捉行为应如何进行。 |
scrollbar-color | 指定元素滚动条的颜色。 |
T
tab-size | 指定制表符字符的宽度。 |
table-layout | 定义用于布局表格单元格、行和列的算法。 |
text-align | 指定文本的水平对齐方式。 |
text-align-last | 描述当 text-align 为 "justify" 时,如何对齐块的最后一行或强制换行之前的行。 |
text-combine-upright | 指定将多个字符组合到单个字符的空间中。 |
text-decoration | 指定添加到文本的装饰。 |
text-decoration-color | 指定文本装饰的颜色。 |
text-decoration-line | 指定文本装饰中的线条类型。 |
text-decoration-style | 指定文本装饰中线条的样式。 |
text-decoration-thickness | 指定装饰线的厚度。 |
text-emphasis | text-emphasis-style 和 text-emphasis-color 属性的简写属性。 |
text-emphasis-color | 指定强调标记的颜色。 |
text-emphasis-position | 指定强调标记的位置。 |
text-emphasis-style | 指定强调标记的样式。 |
text-indent | 指定文本块中第一行的缩进。 |
text-justify | 指定当 text-align 为 "justify" 时使用的对齐方法。 |
text-orientation | 定义行中字符的方向。 |
text-overflow | 指定文本溢出包含元素时应发生的情况。 |
text-shadow | 为文本添加阴影。 |
text-transform | 控制文本的大小写。 |
text-underline-offset | 指定下划线文本装饰的偏移距离。 |
text-underline-position | 指定下划线文本装饰的位置。 |
top | 指定定位元素的顶部位置。 |
transform | 将二维或三维变换应用于元素。 |
transform-origin | 允许您更改变换元素上的位置。 |
transform-style | 指定嵌套元素在三维空间中的呈现方式。 |
transition | 所有 transition-* 属性的简写属性。 |
transition-delay | 指定过渡效果何时开始。 |
transition-duration | 指定过渡效果完成所需的时间(秒或毫秒)。 |
transition-property | 指定过渡效果适用的 CSS 属性名称。 |
transition-timing-function | 指定过渡效果的速度曲线。 |
translate | 指定元素的位置。 |
U
unicode-bidi | 与 direction 属性一起使用,以设置或返回文本是否应被覆盖以支持同一文档中的多种语言。 |
user-select | 指定元素的文本是否可以选择。 |
V
vertical-align | 设置元素的垂直对齐方式。 |
visibility | 指定元素是否可见。 |
W
white-space | 指定元素内部的空白如何处理。 |
widows | 设置必须在页面或列顶部保留的最小行数。 |
width | 设置元素的宽度。 |
word-break | 指定单词到达行尾时应如何断开。 |
word-spacing | 增加或减少文本中单词之间的间距。 |
word-wrap | 允许将长而不可分割的单词断开并换行。 |
writing-mode | 指定文本行是水平排列还是垂直排列。 |
Z
z-index | 设置定位元素的堆叠顺序。 |
zoom | 指定元素的缩放系数。元素可以放大和缩小。 |