CSS 属性手册

最后更新：2026-09-13

CSS 属性手册

按字母序排列的 153 个 CSS 属性及其取值说明。

A
aspect-ratio	aspect-ratio 属性用于强制元素保持固定的宽高比，无需再通过 padding 百分比 hack 实现。默认值 auto 使用元素自身的固有比例（如图片）。它是 CSS 较新的特性，极大简化了响应式视频、卡片等比例容器的实现。
align-items	align-items 属性用于设置弹性容器内所有项目在交叉轴上的对齐方式，控制项目在垂直于主轴方向上的位置。默认值为 stretch，项目会被拉伸以填满容器在交叉轴方向的高度。该属性常用于实现垂直居中、顶部对齐、底部对齐和基线对齐等常见布局效果。
animation	animation 是 CSS 中用于实现复杂动画效果的简写属性，配合 @keyframes 规则可以定义多阶段、可循环、可暂停的动画序列。与 transition 不同，animation 无需触发条件即可自动播放，适合实现加载动画、轮播、呼吸效果等持续性的视觉表现。
align-self	align-self 属性用于设置单个弹性项目在交叉轴上的对齐方式，覆盖容器 align-items 的默认设置。默认值为 auto，表示继承容器的 align-items 值。通过该属性，可以让某个项目独立于其他项目进行对齐，例如让一个项目居中而其他项目顶部对齐，这在导航栏和卡片布局中非常实用。
align-content	align-content 属性用于设置弹性容器内多行项目在交叉轴上的对齐方式和间距分配，仅在项目换行（flex-wrap: wrap）产生多行时生效。它类似于 justify-content，但作用在交叉轴上且针对行与行之间的空间。单行情况下该属性不产生效果，此时应使用 align-items。
animation-duration	animation-duration 用于定义动画完成一个完整周期所需的时间长度。时间越短动画越快，时间越长动画越慢。该属性是 animation 简写的一部分，单独使用时可覆盖简写中的持续时间设置。
animation-timing-function	animation-timing-function 用于定义动画在运行过程中的速度变化规律，即动画是匀速、先快后慢，还是带有弹跳感。它通过控制中间帧的时间分布，让动画更符合物理直觉或设计风格，是提升动效质感的关键属性。
appearance	appearance 用于控制元素是否使用浏览器原生的外观样式（如表单控件的默认渲染）。当设置为 none 时，元素会移除原生外观，完全由 CSS 控制样式，是自定义表单控件外观的关键属性。
B
box-sizing	box-sizing 属性决定 width 和 height 的计算方式，是理解 CSS 盒模型的关键。默认值 content-box 只包含内容区，padding 和 border 会额外增加元素尺寸；border-box 则把 padding 和 border 包含在 width/height 内，更直观易用。现代项目普遍采用 border-box 作为全局默认值。
border	border 是 CSS 中最常用的边框简写属性，可以一次性设置元素的边框宽度、样式和颜色。它围绕在元素内容之外、内边距之内，是盒模型的重要组成部分。通过 border，你可以快速为元素添加可见的轮廓边界。
border-width	border-width 用于设置元素边框的粗细程度。可以使用预定义关键字 thin、medium、thick，也可以使用具体的长度值（如 px、em）。该属性作为单独属性使用时，只控制宽度，不影响样式和颜色。
border-style	border-style 用于定义边框的线型外观，如实线、虚线、点线等。它是边框能否显示的关键——即使设置了 border-width 和 border-color，如果 border-style 为 none，边框依然不可见。CSS 提供了 10 种不同的线型供选择。
border-color	border-color 用于设置元素边框的颜色。支持所有 CSS 颜色格式，包括颜色名称、十六进制、rgb()、rgba()、hsl() 等。作为单独属性使用时，只控制边框颜色，不影响宽度和样式。
border-radius	border-radius 用于将元素的直角边角变为圆角，是现代 UI 设计中最常用的装饰属性之一。它接受长度值或百分比值，值越大圆角越明显。当半径达到或超过边长的一半时，角会变成完整的半圆形或圆形。
background-color	background-color 属性用于设置元素的背景颜色，是页面视觉设计中最基础的属性之一。它接受所有 CSS 颜色值，也可以使用 transparent 关键字实现透明背景。该属性不会被继承，每个元素默认背景为透明。
background	background 是背景相关属性的简写形式，可以一次性设置背景颜色、图片、位置、大小、重复方式等多个子属性。使用简写属性可以让代码更简洁，同时未指定的属性会使用默认值。它是 CSS 开发中最常用的简写属性之一。
background-image	background-image 属性用于在元素上设置一个或多个背景图像，支持 url() 图片路径和渐变函数。多张背景图用逗号分隔，先写的图层显示在上层。该属性常与 background-size、background-position 等配合使用。
background-position	background-position 属性用于设置背景图像在元素中的起始位置，默认从左上角（0% 0%）开始。它支持关键字（left、center、right、top、bottom）、长度值和百分比。该属性常与 background-image 配合使用以精确定位背景图。
background-size	background-size 属性用于控制背景图像的尺寸，是 CSS3 新增的属性。它支持 auto（原始尺寸）、cover（覆盖整个容器）、contain（完整显示在容器内）以及具体的长度和百分比值。该属性在响应式设计中非常实用。
box-shadow	box-shadow 用于在元素边框外部或内部添加一层或多层阴影效果，让元素在页面上呈现出立体感和层次感。它是实现卡片浮起、按钮按下等现代 UI 视觉效果的核心属性，支持设置阴影的偏移、模糊半径、扩散半径和颜色。
border-image	border-image 允许使用图片来绘制元素的边框，而不是传统的实线或虚线。它通过将一张图片切割成九宫格（四个角、四条边、中间区域），再将各部分映射到边框对应位置来实现。这是创建复杂边框装饰效果的强大工具。
background-attachment	background-attachment 属性用于决定背景图像是否随页面滚动。默认 scroll 表示背景随元素内容滚动；fixed 表示背景相对视口固定，产生视差效果；local 表示背景随元素内部内容滚动。该属性常用于实现视觉特效。
background-clip	background-clip 属性用于控制背景的绘制区域，决定背景（颜色或图片）在哪个盒子模型区域内显示。默认 border-box 让背景延伸到边框下，padding-box 裁剪到内边距区域，content-box 只显示在内容区域。CSS3 还新增了 text 值实现文字裁剪效果。
background-origin	background-origin 属性用于设置背景图像定位的原点区域，决定 background-position 的参考基准。默认 padding-box 表示背景相对内边距区域定位，border-box 相对边框区域，content-box 相对内容区域。该属性常与 background-clip 配合使用。
background-blend-mode	background-blend-mode 属性用于设置元素的背景图像之间、以及背景图像与背景颜色之间的混合模式。它支持多种混合模式如 multiply、screen、overlay 等，类似 Photoshop 的图层混合。该属性为 CSS3 新增，适合创建丰富的视觉效果。
backdrop-filter	backdrop-filter 属性用于对元素背后的区域应用滤镜效果（如模糊、亮度调整），常用于实现毛玻璃（磨砂玻璃）效果。与 filter 不同，backdrop-filter 影响的是元素下层的内容而非元素本身。该属性在现代浏览器中支持良好，但需要元素背景具有一定透明度才能看到效果。
bottom	bottom 属性用于定义定位元素从其包含块底部边缘向上的偏移量。它仅对非 static 的定位元素生效，常与 absolute、fixed 定位配合，实现从底部进行定位或拉伸元素高度的效果。
backface-visibility	backface-visibility 用于控制元素在 3D 旋转后，其背面朝向观察者时是否可见。默认值为 visible，背面会镜像显示正面内容；设为 hidden 后，背面朝向观察者时元素不可见，常用于实现卡片翻转、立方体等需要区分正反面的 3D 效果。
box-decoration-break	box-decoration-break 属性控制元素的装饰样式（背景、边框、内边距等）在断裂处（如换行、跨页）如何渲染。默认值 slice 让装饰像被切断一样延续；clone 则每段独立渲染装饰。它主要影响行内元素跨行和打印分页时的视觉效果。
C
color	color 属性用于设置元素中文本的前景色，是 CSS 中最常用的样式之一。它可以接受颜色关键字、十六进制、RGB、HSL 等多种颜色格式。该属性会被子元素继承，因此通常在父元素上设置以统一整段文本的颜色。
cursor	cursor 用于控制当鼠标指针悬停在元素上时显示的光标形状，是向用户传达元素可交互性的重要视觉线索。通过设置不同的光标类型（如 pointer、text、not-allowed），可以直观地告诉用户该元素是否可点击、可拖动或禁用。
clear	clear 属性用于控制元素是否允许左侧、右侧或两侧存在浮动元素，当设置为 left、right 或 both 时，元素会被移动到相应浮动元素的下方。它是处理浮动布局时防止布局错乱的重要工具。
columns	columns 是 column-count 和 column-width 的简写属性，用于将元素内容自动分割成多列显示，类似于报纸排版的效果。它常用于长文本内容的多栏展示，提升阅读体验。
column-count	column-count 属性用于指定元素内容被分割成的列数。它是 CSS 多列布局的一部分，常与 column-gap、column-rule 配合使用，实现类似报纸的多栏排版效果。
column-gap	column-gap 属性用于设置多列布局中列与列之间的间距。它是 CSS 多列布局的重要组成部分，合理设置列间距可以显著提升多栏文本的可读性和美观度。
column-rule	column-rule 是 column-rule-width、column-rule-style、column-rule-color 的简写属性，用于在多列布局的列与列之间绘制一条分隔线。它类似 border，但仅显示在列间距中，用来增强多栏文本的栏位区分。
column-span	column-span 属性用于指定某个元素是否跨越多列显示。设置为 all 时，该元素会横跨所有列，常用于多列布局中的标题或副标题，使其在视觉上与分栏内容区分开。
column-width	column-width 属性用于指定多列布局中每列的理想宽度。浏览器会根据容器宽度和该值自动计算实际列数，内容会自适应填充到各列中，适合需要弹性列宽的多栏排版场景。
clip-path	clip-path 用于将元素裁剪为指定的几何形状（如圆形、多边形、椭圆等），只显示形状内的部分，形状外的内容会被隐藏。相比传统的 overflow: hidden 矩形裁剪，clip-path 能实现任意形状的可见区域，是创意排版和视觉特效的利器。
content	content 属性用于在元素的前后插入生成的内容，是 ::before 和 ::after 伪元素的必备属性。它可以插入字符串、图片、计数器值或引用属性值，常用于添加装饰性内容、清除浮动或显示链接地址，而无需改动 HTML 结构。
counter-increment	counter-increment 属性用于递增一个或多个 CSS 计数器，是实现自动编号的核心机制之一。每次元素匹配选择器时，指定的计数器就会增加指定的步长（默认为 1）。它需要配合 counter-reset 和 content 的 counter() 函数才能实现完整的自动编号效果。
counter-reset	counter-reset 属性用于创建新的 CSS 计数器并将其初始化为指定值（默认为 0）。它是实现自动编号的第一步，通常在父元素上设置。配合 counter-increment 和 content 的 counter() 函数，可以实现复杂的多级编号系统。
caret-color	caret-color 用于设置输入框、文本区域等可编辑元素中插入符（光标闪烁的竖线）的颜色。通过自定义插入符颜色，可以让表单元素与页面整体配色保持一致，或用于突出显示当前输入位置。
color-scheme	color-scheme 用于告诉浏览器该元素支持哪些配色方案（浅色/深色），让浏览器能够选择合适的默认颜色来渲染该元素的原生控件（如滚动条、表单元素）。它是实现深色模式适配的重要属性。
D
display	display 属性用于定义元素在页面中的显示类型，决定该元素是作为块级元素、内联元素，还是使用 Flex/Grid 等现代布局模型呈现。它是 CSS 布局中最基础也最强大的属性之一，几乎可以改变任何一个元素在文档流中的行为方式。
direction	direction 属性用于设置文本的书写方向，支持从左到右（ltr）和从右到左（rtl）两种模式。它主要影响阿拉伯语、希伯来语等从右到左书写的语言，同时也会改变文本对齐、滚动条位置和布局流向。对于多语言网站，通常建议在 HTML 标签上使用 dir 属性而非 CSS。
E
empty-cells	empty-cells 属性控制空单元格（没有内容或只有空白符的单元格）是否显示其边框和背景。默认值 show 会正常渲染空单元格的边框和背景；hide 则会隐藏它们，让表格看起来更整洁。该属性只对 border-collapse:separate 的表格生效。
F
font	font 是字体的简写属性，可以一次性设置字体样式、字重、字号、行高和字体族。使用简写能减少代码量，但需注意属性顺序和必填项。
font-family	font-family 用于指定元素文本使用的字体名称或通用字体族。可以列出多个字体作为回退列表，浏览器从前向后选用第一个可用的字体。
font-size	font-size 用于设置元素文本的字号大小，是最常用的文本样式之一。可以使用绝对关键字、固定长度或相对单位来控制文字尺寸。
font-weight	font-weight 用于设置文本的粗细程度，从细到粗支持关键字和 1-1000 的数字值。粗体常用于标题和强调文本。
font-style	font-style 用于设置文本是否为斜体，常用于引用、强调或特殊排版场景。可选 normal、italic、oblique 三个值。
float	float 属性用于让元素脱离普通文档流，向左或向右浮动，直到其边缘碰到包含块或另一个浮动元素的边缘。它最初用于实现文字环绕图片的效果，后来被广泛用于构建多列布局，如今在 Flexbox 和 Grid 普及后已回归其本来的用途。
flex	flex 是 CSS 弹性盒子模块中最核心的简写属性，用于设置一个弹性项目（flex item）如何伸缩以适应容器内的剩余空间。它由 flex-grow、flex-shrink 和 flex-basis 三个子属性组成，分别控制项目的放大比例、缩小比例和初始大小。通过 flex 属性，可以轻松实现等分布局、自适应宽度和流式排列等常见布局效果。
flex-direction	flex-direction 属性用于定义弹性容器的主轴方向，即弹性项目在容器内的排列方向。默认情况下，项目从左到右水平排列（row），通过该属性可以轻松切换为垂直排列或反向排列。它是弹性布局中最基础的方向控制属性，决定了后续 justify-content 和 align-items 的作用轴向。
flex-grow	flex-grow 属性用于设置弹性项目的放大比例，决定当容器有剩余空间时，该项目能分配到多少额外空间。它的默认值为 0，表示不放大，项目保持原始尺寸。数值越大，项目在剩余空间中所占的份额就越大，所有项目的 flex-grow 值按比例分配剩余空间。
font-variant	font-variant 用于设置小型大写字母（small-caps）等字体变体效果。目前主要支持 small-caps，使小写字母显示为缩小的大写形式。
font-size-adjust	font-size-adjust 用于在字体回退时保持 x 高度（小写字母 x 的高度）一致，避免不同字体混排时字号视觉差异过大。属于 CSS3 属性。
font-stretch	font-stretch 用于选择字体的紧缩或拉伸变体，从 ultra-condensed 到 ultra-expanded 共九档。需要字体本身包含对应宽度的变体才能生效。
flex-wrap	flex-wrap 属性用于控制弹性容器内的项目是否换行显示。默认值为 nowrap，所有项目强制排列在一行内，可能导致项目被压缩或溢出容器。设置为 wrap 后，项目会自动换到下一行，这在响应式布局和多列卡片排列中非常实用。
flex-flow	flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写形式，用于一次性定义弹性容器的主轴方向和项目是否换行。由于这两个属性通常需要配合使用，使用 flex-flow 可以让代码更简洁。它的默认值为 row nowrap，即水平排列且不换行。
flex-shrink	flex-shrink 属性用于设置弹性项目的缩小比例，决定当容器空间不足时，该项目会收缩多少以适应容器。它的默认值为 1，表示项目会按需缩小。值为 0 时项目保持原始尺寸不缩小，即使容器空间不足也不会变形。数值越大的项目在空间不足时收缩得越多。
flex-basis	flex-basis 属性用于设置弹性项目在分配剩余空间之前的初始主轴尺寸，可以理解为项目的"理想大小"。它的默认值为 auto，表示项目按内容或设定的 width/height 决定基础尺寸。设置为具体长度值后，项目会以此为基础，再根据 flex-grow 和 flex-shrink 进行伸缩。
filter	filter 用于对元素施加图形滤镜效果，如模糊、亮度调整、对比度、灰度等，类似 Photoshop 中的滤镜功能。它作用于元素的渲染结果，能同时影响元素及其子元素的内容，是处理图片和视觉特效的常用工具。
G
grid-template-columns	grid-template-columns 用于定义网格容器中列轨道的数量和宽度。通过指定每个列轨道的尺寸，你可以精确控制网格的列结构，是 CSS Grid 布局中最核心的设置之一。它支持固定长度、百分比、弹性单位 fr 以及 repeat()、minmax() 等强大函数。
grid	grid 是 CSS Grid 布局的简写属性，可以一次性定义网格容器的显式轨道、自动轨道以及流动方向。它是 grid-template 和 grid-auto 系列属性的集合体，适合在需要完整描述网格结构时使用，是功能最全面的网格简写。
gap	gap 属性用于设置弹性或网格布局中行与列之间的间距，是 row-gap 和 column-gap 的简写形式。它只在项目之间产生间距，不会在容器边缘添加额外空间，比使用 margin 更简洁可控。该属性让布局间距的管理更加直观，避免了传统 margin 方案中首尾元素需要额外清除间距的麻烦。
grid-template-rows	grid-template-rows 用于定义网格容器中行轨道的数量和高度。通过指定每个行轨道的尺寸，你可以精确控制网格的行结构。它与 grid-template-columns 配合使用，共同构成网格的基本骨架，支持固定长度、百分比、fr 单位以及 minmax() 等函数。
grid-template-areas	grid-template-areas 允许你通过命名区域来直观地定义网格布局结构。每个字符串代表一行，字符串中的每个标识符代表一个单元格所属的区域，相同名称的相邻单元格会自动合并为一个区域。它让网格布局的可读性大幅提升，特别适合整页布局设计。
grid-column	grid-column 是 grid-column-start 和 grid-column-end 的简写属性，用于在网格布局中沿水平方向定位网格项。通过指定起始和结束的网格线编号，你可以控制一个网格项跨越多少列，是实现灵活网格布局的关键属性。
grid-row	grid-row 是 grid-row-start 和 grid-row-end 的简写属性，用于在网格布局中沿垂直方向定位网格项。通过指定起始和结束的网格线编号，你可以控制一个网格项跨越多少行，与 grid-column 配合可以精确控制网格项的位置和尺寸。
grid-area	grid-area 是用于定位网格项的简写属性，可以同时设置 grid-row-start、grid-column-start、grid-row-end、grid-column-end 四个值。它既可以用网格线编号来精确定位，也可以引用 grid-template-areas 中定义的命名区域名称，是网格定位中最灵活的属性。
grid-auto-columns	grid-auto-columns 用于控制网格容器中隐式生成的列轨道的宽度。当网格项被放置到 grid-template-columns 未显式定义的列位置时，会自动创建隐式列，该属性决定了这些自动列的尺寸。它在处理动态内容或不确定数量网格项时非常有用。
grid-auto-rows	grid-auto-rows 用于控制网格容器中隐式生成的行轨道的高度。当网格项被放置到 grid-template-rows 未显式定义的行位置时，会自动创建隐式行，该属性决定了这些自动行的高度。它确保未显式定义的行也能有统一的尺寸表现。
grid-auto-flow	grid-auto-flow 用于控制网格中未显式定位的网格项的自动排列方式。它决定了网格项是按行填充还是按列填充，以及是否启用稠密填充模式来填补布局中的空隙。该属性对网格的整体排列顺序有直接影响。
H
height	height 属性用于设置元素内容区的高度，与 width 同为盒模型核心尺寸属性。默认值 auto 让浏览器根据内容自动计算高度，这是最常用也最推荐的做法。百分比高度需要父元素有明确高度才能生效，否则会被计算为 0。
hyphens	hyphens 属性用于控制浏览器是否在单词内部使用连字符（-）进行断词换行，常见于英文等多音节语言的排版。启用自动断词后，浏览器会根据语言词典在合适的位置插入连字符，让文本在容器边界处更自然地换行，减少参差不齐的空白。
I
isolation	isolation 用于控制元素是否创建新的层叠上下文（stacking context）。当设置为 isolate 时，该元素会形成一个独立的混合环境，使其子元素的 mix-blend-mode 只与元素内部的内容混合，而不会穿透到外部元素。它是精确控制混合模式范围的关键属性。
inset	inset 属性是 top、right、bottom、left 四个定位偏移属性的简写，用于一次性设置定位元素在各方向的偏移量。默认值 auto 表示无偏移。它只对 position 为非 static 的元素生效，语法与 margin 类似，支持 1-4 值写法。
J
justify-content	justify-content 属性用于设置弹性项目在主轴上的对齐方式，决定项目之间以及项目与容器边缘之间的间距分配。它是弹性布局中最常用的对齐属性，可以实现左对齐、右对齐、居中对齐、两端对齐和均匀分布等多种效果。主轴方向由 flex-direction 决定。
justify-items	justify-items 属性用于设置容器内所有项目在主轴（行内轴）方向上的默认对齐方式，主要应用于网格布局（Grid），在弹性布局中不产生效果。它类似于弹性布局中的 justify-content，但作用对象是容器内的每个项目而非项目整体。默认值为 stretch，项目会被拉伸填满单元格。
justify-self	justify-self 属性用于设置单个项目在主轴（行内轴）方向上的对齐方式，覆盖容器 justify-items 的默认设置。它主要应用于网格布局（Grid），在弹性布局中不产生效果。通过该属性，可以让某个项目在单元格内独立对齐，而不影响其他项目的对齐方式。
L
line-height	line-height 用于设置文本行与行之间的垂直间距，即行高。合适的行高能显著提升长文的可读性，通常取字号的 1.5 倍左右。
letter-spacing	letter-spacing 用于控制文本中每个字符之间的间距，正值加大间距，负值缩小间距。常用于标题排版或英文大写字母的阅读优化。
left	left 属性用于定义定位元素从其包含块左侧边缘向右的偏移量。它仅对非 static 的定位元素生效，是最常用的偏移属性之一，常与 absolute、fixed 配合实现从左侧精确定位。
list-style	list-style 是 list-style-type、list-style-position 和 list-style-image 三个属性的简写，用于一次性设置列表项标记的全部样式。默认值为 disc outside none。它是控制列表外观的最高效方式，常用于快速定制或重置列表样式。
list-style-type	list-style-type 属性用于设置列表项前面的标记类型，如实心圆点、空心圆、数字、罗马数字等。默认值为 disc（实心圆点）。它支持多种预定义标记和自定义字符串，是控制列表视觉效果最常用的属性。
list-style-position	list-style-position 属性控制列表项标记相对于列表内容的位置。默认值 outside 让标记位于内容块外部，不影响首行文本对齐；inside 则将标记放入内容块内部，使文本环绕标记排列。它影响列表的排版流和缩进效果。
list-style-image	list-style-image 属性用于将自定义图片设置为列表项的标记，替代默认的圆点、数字等样式。默认值 none 表示不使用图片。它常用于给列表添加品牌化的小图标或装饰性箭头，提升视觉效果。
M
min-width	min-width 属性用于设置元素的最小宽度，防止元素在容器变窄时被压缩得过小。默认值 0 表示没有最小宽度限制。它常与 width、max-width 配合使用，是响应式布局中保护可读性的重要工具。
max-width	max-width 属性用于设置元素的最大宽度，防止元素在大屏上过宽影响阅读体验。默认值 none 表示没有最大宽度限制。它是响应式设计的核心工具，常配合 width:100% 让图片等元素自适应但不超过原始尺寸。
min-height	min-height 属性用于设置元素的最小高度，确保元素在内容较少时仍保持一定高度。默认值 0 表示没有最小高度限制。它常用于保证页面区块的视觉一致性，或让页脚始终保持在页面底部。
max-height	max-height 属性用于设置元素的最大高度，防止元素过高撑破布局。默认值 none 表示没有最大高度限制。它常配合 overflow:auto 使用，当内容超出最大高度时显示滚动条，是实现固定高度滚动区域的常用方案。
margin	margin 属性用于设置元素周围的外部空间，即元素边框与其他元素之间的距离。它是 CSS 盒模型中最常用的属性之一，常用于控制元素之间的间距、实现水平居中以及在元素周围留出呼吸空间。margin 可以是固定长度、百分比，也可以使用 auto 让浏览器自动计算。
mix-blend-mode	mix-blend-mode 用于控制元素的内容如何与其下方元素（背景或相邻元素）进行颜色混合，类似 Photoshop 中的图层混合模式。它能让文字、图片与背景产生丰富的色彩叠加效果，常用于海报、Banner 和艺术感页面设计。
O
overflow	overflow 属性控制内容超出容器边界时的处理方式，是处理内容溢出的核心工具。默认值 visible 让溢出内容可见；hidden 裁剪溢出内容；scroll 始终显示滚动条；auto 则在需要时才显示滚动条，是最常用的选择。
outline	outline 是绘制在元素边框之外的轮廓线，主要用于标识元素获得焦点（focus）的状态。与 border 不同，outline 不占据空间，不会影响元素的尺寸和页面布局。它是简写属性，可同时设置轮廓的颜色、样式和宽度。
opacity	opacity 属性用于设置元素的整体透明度，取值范围为 0 到 1。0 表示完全透明，1 表示完全不透明。与设置透明背景不同，opacity 会影响元素及其所有子内容的透明度，常用于实现淡入淡出效果和视觉层次。
overflow-x	overflow-x 属性专门控制内容在水平方向溢出容器时的处理方式，取值与 overflow 相同。默认值 visible 让溢出内容可见。它常用于禁止页面水平滚动，或让某个区域只在水平方向可滚动。
overflow-y	overflow-y 属性专门控制内容在垂直方向溢出容器时的处理方式，取值与 overflow 相同。默认值 visible 让溢出内容可见。它是最常用的溢出控制属性，常配合 max-height 实现固定高度区域的滚动查看。
outline-offset	outline-offset 用于控制轮廓（outline）与元素边框边缘之间的距离。正值让轮廓向外偏移，远离元素；负值让轮廓向内偏移，贴近甚至进入元素内部。它常与 outline 配合使用，实现更精致的视觉效果。
order	order 属性用于设置弹性项目在容器内的显示顺序，默认值为 0。数值越小的项目越靠前显示，数值相同时按 DOM 顺序排列。该属性仅改变视觉呈现顺序，不会改变 DOM 结构，因此会影响屏幕阅读器的阅读顺序和 Tab 键焦点顺序，使用时需谨慎。
object-fit	object-fit 用于控制替换元素（如 <img>、<video>）的内容如何适应其设定的宽高尺寸。当元素的宽高比例与内容不一致时，object-fit 可以决定是拉伸填充、保持比例裁剪还是完整显示，是响应式图片布局中不可或缺的工具。
object-position	object-position 用于控制替换元素（如 <img>、<video>）的内容在其容器内的显示位置。当 object-fit 导致内容未填满容器或被裁剪时，object-position 可以调整内容的对齐焦点，让关键部分保持在可见区域内。
overscroll-behavior	overscroll-behavior 用于控制滚动容器滚动到边界时的溢出行为，例如是否将滚动事件传递给父容器（滚动链）或触发浏览器的默认行为（如刷新页面、前进后退）。它是解决嵌套滚动容器「滚动穿透」问题的关键属性。
orphans	orphans 属性用于打印分页时控制段落末尾在新页面顶部至少保留的行数，默认值为 2。它属于 CSS 分页媒体属性，目的是避免段落最后一行单独出现在上一页底部（称为孤行），提升印刷排版的可读性。
P
padding	padding 属性用于设置元素内容与边框之间的内部空间。它是 CSS 盒模型的重要组成部分，常用于让内容在容器中留出呼吸空间、增大点击区域或配合背景色让内容更醒目。padding 的值只能是长度或百分比，不能为负值，也不会发生折叠。
position	position 属性用于指定元素的定位方式，决定元素是留在文档流中，还是相对于某个参考点进行偏移。配合 top、right、bottom、left 属性，可以实现相对定位、绝对定位、固定定位和粘性定位等常见布局效果。
pointer-events	pointer-events 用于控制元素是否能成为鼠标事件（如点击、悬停）的目标。当设置为 none 时，元素会完全忽略鼠标事件，事件会穿透到其下方的元素。它是实现点击穿透、禁用交互和复杂图层交互的常用工具。
place-items	place-items 是 align-items 和 justify-items 的简写属性，用于在网格容器中统一设置所有网格项在各自单元格内的对齐方式。它同时控制垂直方向（align）和水平方向（justify）的对齐，是让网格内容居中或对齐的便捷工具。
place-content	place-content 是 align-content 和 justify-content 的简写属性，用于在网格容器中控制整个网格内容区相对于容器的对齐方式。当网格轨道的总尺寸小于容器尺寸时，该属性决定了多余空间的分配方式，是实现网格整体居中和分布的关键。
place-self	place-self 是 align-self 和 justify-self 的简写属性，用于单独控制某个网格项在其单元格内的对齐方式。与 place-items 不同，place-self 设置在具体的网格项上，可以覆盖容器级别的 place-items 设置，实现个别项目的特殊对齐需求。
perspective	perspective 用于定义 3D 变换的透视强度，即观察者眼睛到 z=0 平面的距离。值越小，透视效果越强（近大远小越夸张）；值越大，透视越平缓。该属性需要设置在应用 3D 变换元素的父元素上，是构建真实立体场景的基础。
perspective-origin	perspective-origin 用于定义 3D 透视的观察者位置，即视点（消失点）在元素上的投影位置。默认是元素中心（50% 50%），调整该值可以改变观察立体场景的角度，例如从上方俯视、从侧面斜视等，配合 perspective 使用。
Q
quotes	quotes 属性用于自定义 q 元素或 content 的 open-quote/close-quote 使用的引号字符。默认值由浏览器根据语言环境决定。它支持定义多级引号对，实现嵌套引用时自动切换引号样式，是国际化排版的重要工具。
R
right	right 属性用于定义定位元素从其包含块右侧边缘向左的偏移量。它仅对非 static 的定位元素生效，常与 absolute、fixed 等定位方式配合，实现从右侧进行定位的效果。
rotate	rotate 是 transform 的一个独立属性，用于让元素围绕指定轴进行 2D 或 3D 旋转。作为独立属性，它可以与 translate、scale 等其他变换分开控制，特别适合需要单独动画化旋转角度的交互场景。
resize	resize 用于控制用户是否可以通过拖拽来调整元素的尺寸，以及允许的调整方向。它常用于 <textarea> 等元素，让用户根据需要自由改变元素大小，提升表单的可用性。
S
scale	scale 是 transform 的一个独立属性，用于在 2D 或 3D 空间中按比例放大或缩小元素。作为独立属性，它可以与 translate、rotate 等其他变换分开控制，特别适合需要单独动画化缩放效果的交互场景，如按钮点击反馈、图片放大预览等。
scroll-behavior	scroll-behavior 用于控制滚动容器内的滚动跳转是瞬时完成还是平滑过渡。当设置为 smooth 时，点击锚点链接或使用 JavaScript 滚动时，页面会平滑地滚动到目标位置，而不是瞬间跳转，能显著提升用户体验。
scroll-snap-type	scroll-snap-type 用于实现滚动时的吸附（snap）效果，让滚动容器在停止时自动将指定元素对齐到容器的边缘或中心。它常用于实现轮播图、全屏滚动页面和横向滑动列表，让滚动体验更加精准和可控。
scrollbar-color	scrollbar-color 用于自定义浏览器滚动条的颜色，包括滑块（thumb）和轨道（track）两部分。它是 CSS Scrollbars 规范的一部分，提供了一种简单的方式来让滚动条与页面整体配色保持一致，无需使用 JavaScript 插件。
T
text-align	text-align 属性用于设置块级元素内文本的水平对齐方式，是最常用的文本样式之一。它支持左对齐、右对齐、居中对齐和两端对齐等多种取值，适用于段落、标题、单元格等所有块级容器。需要注意的是，text-align 对齐的是元素内部的内容，而非元素本身。
text-decoration	text-decoration 属性用于给文本添加装饰线，常见用途包括添加下划线、删除线和上划线。它是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 四个子属性的简写形式。默认情况下，链接（a 标签）会自带下划线，通常会在重置样式中去掉。
text-transform	text-transform 属性用于控制文本的大小写转换效果，可以在不修改原始文字内容的情况下，将文本统一显示为大写、小写或首字母大写。这个属性会保留原始文本在 HTML 中的形式，对屏幕阅读器和复制粘贴的内容没有影响，纯粹是视觉层面的转换。
text-indent	text-indent 属性用于设置块级元素首行文本的缩进距离，常见于文章段落的首行缩进排版。它只影响元素的第一行内容，对后续行无效。取值可以是固定长度（如 2em）或百分比（相对于包含块的宽度），也支持负值实现悬挂缩进效果。
text-shadow	text-shadow 属性用于给文本添加阴影效果，让文字在背景上更具立体感和视觉层次。它支持设置水平偏移、垂直偏移、模糊半径和阴影颜色四个值，并且可以同时添加多个阴影，用逗号分隔，实现发光、浮雕、描边等丰富的视觉效果。
top	top 属性用于定义定位元素从其包含块顶部边缘向上的偏移量。它仅对 position 值为 relative、absolute、fixed 或 sticky 的元素生效，用于精确控制元素在垂直方向上的位置。
transition	transition 是 CSS 中用于实现属性值平滑过渡的简写属性，可以在元素状态改变时（如 hover、focus）让样式变化以动画方式呈现，而不是瞬间跳变。通过指定目标属性、持续时间、速度曲线和延迟时间，就能轻松创建流畅的交互效果。它是构建现代 Web 微交互的基础工具。
transform	transform 用于对元素应用 2D 或 3D 几何变换，包括平移、旋转、缩放、倾斜等操作。变换发生在渲染阶段，不会影响文档流布局，因此是实现高性能视觉效果的常用手段。transform 是 CSS 动画和交互设计的核心属性之一。
tab-size	tab-size 用于设置 Tab 字符（\t）在页面中显示为多少个空格宽度，常用于代码块和 pre 标签的排版。默认值为 8。
text-align-last	text-align-last 属性用于设置块级元素内最后一行的对齐方式，常与 text-align: justify 配合使用。默认情况下，text-align 的对齐规则不作用于段落的最后一行，通过 text-align-last 可以单独控制最后一行的对齐效果，让两端对齐的排版更加灵活美观。
text-justify	text-justify 属性用于设置当 text-align 设为 justify（两端对齐）时，文本间距的调整策略。它控制浏览器是通过调整单词间距、字符间距，还是两者结合来实现两端对齐效果。这个属性主要影响使用 justify 值时的排版细节。
text-overflow	text-overflow 属性用于控制当文本溢出其容器时如何显示，最常见的用途是配合 overflow: hidden 和 white-space: nowrap 实现单行文本省略号效果。它支持直接截断（clip）和省略号（ellipsis）两种处理方式，是界面设计中处理长文本的常用手段。
text-underline-offset	text-underline-offset 属性用于控制文本下划线与文字基线之间的距离，让下划线的位置更加灵活美观。默认情况下，下划线紧贴文字底部，通过设置偏移量可以让下划线与文字之间留出间距，避免下划线与字母下伸部分（如 g、y）重叠。
transition-property	transition-property 用于指定哪些 CSS 属性在发生变化时应用过渡效果。默认值为 all，表示所有可过渡属性都会参与过渡；也可以显式列出特定属性名，避免不必要的性能开销和意外的动画行为。
transform-origin	transform-origin 用于设置元素变换的基准点（原点）位置。默认是元素的中心点（50% 50%），旋转、缩放等变换都围绕该点进行。通过调整原点位置，可以创造出截然不同的变换效果，例如绕着边缘旋转、从角落缩放等。
transform-style	transform-style 用于决定元素的子元素是否保留其 3D 空间位置。默认值为 flat，子元素被压平到父元素的 2D 平面中；设为 preserve-3d 后，子元素可以在独立的 3D 空间中定位，配合 perspective 能构建真正的立体场景。
translate	translate 是 transform 的一个独立属性，用于在 2D 或 3D 空间中移动元素的位置。与 transform: translate() 效果相同，但作为独立属性可以单独控制位移，而不影响其他变换（如旋转、缩放），在需要分别动画化不同变换时非常实用。
table-layout	table-layout 属性决定表格单元格宽度的计算算法。默认值 auto 根据内容自动调整列宽，内容多时列会被撑宽；fixed 则按表格首行或显式宽度固定列宽，不受内容影响。fixed 模式渲染性能更好，适合数据量大的表格。
U
unicode-bidi	unicode-bidi 属性用于控制文本的双向排列算法（Unicode Bidirectional Algorithm），主要处理混合了不同方向文字（如英文与阿拉伯文）的场景。它可以改变文本的嵌入层级、覆盖方向或让元素脱离父级的方向上下文，是国际化网站中处理复杂文字方向的关键属性。
user-select	user-select 用于控制用户是否可以用鼠标选中文本内容。当设置为 none 时，元素内的文本将无法被选中，常用于按钮、标签、图标等不需要被复制的 UI 元素，避免用户误选无关内容。
V
visibility	visibility 属性控制元素是否可见，与 display:none 的关键区别在于：hidden 仍占据布局空间，只是视觉上不可见。默认值 visible 正常显示。该属性是可继承的，常用于实现隐藏但保留占位的交互效果。
vertical-align	vertical-align 属性用于控制行内元素或表格单元格内容的垂直对齐方式。它支持关键字（如 top、middle、baseline）和长度/百分比值，常用于对齐图标与文字、调整行内元素位置，或在表格中控制内容的垂直位置。需要注意的是，vertical-align 对块级元素无效。
W
width	width 属性用于设置元素内容区的宽度，是 CSS 盒模型中最常用的尺寸属性之一。它只影响非替换元素（non-replaced elements），默认值 auto 让浏览器根据包含块自动计算宽度。实际开发中常配合 max-width、min-width 实现响应式布局。
white-space	white-space 属性用于控制元素内空白符（空格、制表符、换行符）的处理方式以及文本是否自动换行。它决定了浏览器是合并多个空格为一个、保留原始格式，还是在文本溢出时自动换行。这个属性在显示代码、保留排版格式或实现单行省略时非常关键。
word-spacing	word-spacing 用于控制文本中单词之间的间距，对以空格分隔的语言（如英文）效果明显。中文无空格分词，通常对中文无效。
word-break	word-break 属性用于控制文本在容器边界处的单词换行规则，主要解决长单词或 URL 溢出容器的问题。它决定了是否允许在单词内部断行，以及如何处理 CJK（中日韩）文本的换行。这个属性在处理用户输入的长字符串时非常实用。
word-wrap	word-wrap 属性是 overflow-wrap 的别名，用于控制当长单词或 URL 超出容器宽度时是否允许在单词内部断行。它的设计初衷是防止不可断的长字符串溢出容器，是处理文本溢出问题的常用属性。现代 CSS 规范推荐使用 overflow-wrap 替代。
writing-mode	writing-mode 属性用于设置文本的整体排版方向，支持水平排版（horizontal-tb）和垂直排版（vertical-rl、vertical-lr）两种模式。它常用于实现中文古籍、日文传统排版等竖排文字效果，也会改变块级元素和行内元素的排列方向，是东亚语言排版的重要工具。
widows	widows 属性用于打印分页时控制段落开头在上一页底部至少保留的行数，默认值为 2。它与 orphans 配对使用，避免段落第一行单独留在上一页底部（称为寡行），确保印刷文档的段落完整性。
Z
z-index	z-index 属性用于控制定位元素在 Z 轴（垂直于屏幕方向）上的层叠顺序，值越大的元素会覆盖在值较小的元素之上。它常与 position 属性配合使用，用于处理弹窗、下拉菜单、遮罩等需要分层显示的场景。
zoom	zoom 用于对元素进行非标准的缩放变换，可以按比例放大或缩小元素及其所有子元素。与 transform: scale() 不同，zoom 会影响元素的布局空间（会占据缩放后的实际空间），且会触发浏览器的完整重排。虽然它不是标准 CSS，但浏览器支持广泛。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

CSS 属性手册

CSS 属性手册

🙏 帮我们做得更好