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 | 指定输入框、文本区域或任何可编辑元素的插入符(caret)的颜色 |
@charset | 指定样式表中使用的字符编码 |
清除 | 指定浮动元素旁边的元素应如何处理 |
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 伪元素一起使用,以插入生成的content |
counter-increment | 增加或减少一个或多个 CSS 计数器的值 |
counter-reset | 创建或重置一个或多个 CSS 计数器 |
counter-set | 创建或设置一个或多个 CSS 计数器 |
cursor | 指定鼠标指针悬停在元素上时显示的鼠标指针 |
D
direction | 指定文本方向/书写方向 |
display | 指定某个 HTML 元素的显示方式 |
E
empty-cells | 指定是否在表格的空单元格上显示边框和背景 |
F
筛选器 | 在元素显示之前定义效果(例如模糊或颜色偏移) |
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 | 设置如何分割单词以改善文本布局 |
hyphenate-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 属性 |
margin-block | 指定块方向上的 margin |
margin-block-end | 指定块方向上的结束 margin |
margin-block-start | 指定块方向上的开始 margin |
margin-bottom | 设置元素的底部 margin |
margin-inline | 指定内联方向上的 margin |
margin-inline-end | 指定内联方向上的结束 margin |
margin-inline-start | 指定内联方向上的开始 margin |
margin-left | 设置元素的左 margin |
margin-right | 设置元素的右 margin |
margin-top | 设置元素的顶部 margin |
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 | 指定元素沿路径动画时的旋转 |
不透明度 | 设置元素的透明度级别 |
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 | 为 3D 定位元素增加透视效果 |
perspective-origin | 定义用户观看 3D 定位元素的哪个位置 |
place-content | 为弹性盒子和网格布局指定 align-content 和 justify-content 属性值 |
place-items | 为网格布局指定 align-items 和 justify-items 属性值 |
place-self | 为网格布局指定 align-self 和 justify-self 属性值 |
pointer-events | 定义元素是否对指针事件做出反应 |
position | 指定用于元素的定位方法类型(static、relative、absolute 或 fixed) |
@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 中的线条类型 |
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 | 指定已定位元素的顶部位置 |
转换 | 对元素应用 2D 或 3D 变换 |
transform-origin | 允许您更改变换元素上的位置 |
transform-style | 指定嵌套元素在 3D 空间中的渲染方式 |
transition | 所有 transition-* 属性的简写属性 |
transition-delay | 指定过渡效果何时开始 |
transition-duration | 指定过渡效果完成所需的秒数或毫秒数 |
transition-property | 指定过渡效果的 CSS 属性名称 |
transition-timing-function | 指定过渡效果的速度曲线 |
翻译 | 指定元素的位置 |
U
unicode-bidi | 与 direction 属性一起使用,用于设置或返回文本是否应被覆盖以支持同一文档中的多种语言 |
user-select | 指定是否可以选择元素的文本 |
V
vertical-align | 设置元素的垂直对齐方式 |
可见性 | 指定元素是否可见 |
W
white-space | 指定如何处理元素内部的空白符 |
widows | 设置页面或列顶部必须保留的最小行数 |
width | 设置元素的宽度 |
word-break | 指定单词在到达行尾时如何换行 |
word-spacing | 增加或减少文本中单词之间的间距 |
word-wrap | 允许长而不可断开的单词被断开并换到下一行 |
writing-mode | 指定文本行的布局是水平还是垂直 |
Z
z-index | 设置已定位元素的堆叠顺序 |
zoom | 指定元素的缩放因子。元素可以放大和缩小 |