第四篇、样式大全

Despupilles
6 阅读43分钟

文本样式

属性名描述作用
color设置文本的字体颜色。 适用于正文、标题、链接等所有需要定义文字颜色的场景
text-shadow为文本添加阴影效果，增强视觉层次。 适用于标题突出、艺术字效果等需要强化文本视觉的场景
text-transform转换文本大小写。 适用于英文标题、按钮文字等需要统一文本大小写格式的场景
text-indent设置文本首行缩进。 专用于段落开头的缩进（如中文段落首行缩进 2 字符）
letter-spacing调整字符（字母 / 汉字）之间的间距。 常用于标题字距优化、品牌标识排版
word-spacing调整单词之间的间距（对中文无效）。 适用于英文正文 / 标题的单词间距优化
text-align设置文本块的水平对齐方式（左 / 右 / 居中 / 两端）。 适用于段落、标题、按钮文字对齐
text-align-last设置文本块最后一行的水平对齐方式。 用于单独控制段落最后一行的对齐规则
text-justifytext-align: justify 时，控制文本两端对齐的间距分配算法规则。 适用于正文排版
text-decoration设置文本装饰线的综合样式。 适用于链接、删除文本、强调文本等场景
text-decoration-line设置文本装饰线的位置类型。 用于定义下划线、上划线、删除线等装饰线位置
text-decoration-style设置文本装饰线的形状样式。 用于定义实线、虚线、波浪线等装饰线形态
text-decoration-color设置文本装饰线的颜色。 用于自定义装饰线颜色，区分装饰线与文字色
text-decoration-thickness设置文本装饰线的粗细。 用于调整装饰线的视觉粗细，适配不同排版风格
text-underline-offset设置下划线与文本的垂直偏移距离。 用于优化下划线位置，避免遮挡文字
text-underline-position设置下划线的对齐位置。 用于定义下划线相对文字基线 / 字母的对齐方式
text-emphasis设置文本着重标记的综合样式。 适用于需要突出强调的文本（如重点关键词、标注内容）
text-emphasis-style设置着重标记的样式。 用于定义圆点、圆圈、三角形或自定义字符等标记形态
text-emphasis-color设置着重标记的颜色。 用于自定义标记颜色，与文字色区分以增强视觉强调
text-emphasis-position设置着重标记的位置。 用于定义标记在文字上方 / 下方，适配横竖排文本排版
vertical-align设置垂直对齐方式。 控制行内/表格元素的垂直对齐（baseline/top/middle/bottom/数值/百分比）。
tab-size设置制表符宽度。 定义文本中制表符（\t）显示的空格数（数值/长度值），适配代码/文本排版中制表符的展示效果。
hanging-punctuation设置悬挂标点。 控制标点符号是否超出文本行框（none/first/last/allow-end/force-end等），优化排版避免标点顶格，适配中文/西文排版。
initial-letter设置首字母样式。 控制文本首字母下沉/上浮的行数和间距，实现首字放大效果。
word-break设置单词换行规则。 控制文本换行时是否拆分单词（normal/break-all/keep-all），适配中英文混排换行逻辑。
overflow-wrap (word-wrap)设置长单词换行规则。 允许长单词/URL换行到下一行（normal/break-word），避免溢出，是word-wrap的别名。
white-space设置空白字符处理方式。 控制空格、换行、制表符的显示（normal/nowrap/pre/pre-wrap/pre-line），核心文本排版属性。
text-overflow设置文本溢出显示方式。 控制溢出文本显示省略号/自定义字符（clip/ellipsis/string），需配合overflow:hidden和white-space:nowrap使用。
hyphens设置连字符换行规则。 控制西文单词换行时是否自动加连字符（none/manual/auto），优化西文排版。
hyphenate-character设置自定义连字符。 定义单词换行时使用的连字符样式（默认-），支持自定义字符，适配特殊排版需求。

字体样式

属性名描述作用
font-style设置字体样式。 适用于强调文本、特殊排版场景（正常 / 斜体 / 倾斜）
font-variant控制字母的大小写显示形式。 适用于英文标题、装饰性文本
font-weight设置字体粗细。 适用于标题强调、正文层级区分
font-size设置字体大小。 适配不同设备 / 场景的阅读需求，是文本排版核心属性
line-height设置行高（行间距）。 直接影响文本可读性，适用于所有文本排版场景
font-family设置字体类型。 决定文本基础视觉风格，需兼顾跨平台兼容性
font（简写）字体属性简写。 按固定顺序整合多个字体属性，简化代码书写（顺序：[font-style] → [font-variant] → [font-weight] → font-size/[line-height] → font-family）
font-variant-caps设置字体大小写变体。 控制文本大小写显示的精细样式（normal/small-caps/all-small-caps/petite-caps等），优化大小写排版的视觉一致性。
font-size-adjust设置字体大小调整系数。 基于字体x-height（小写字母高度）调整字号，保证不同字体替换后文字可读性一致，适配字体回退场景。
font-stretch设置字体拉伸样式。 控制字体的宽窄比例（normal/condensed/expanded/ultra-condensed/ultra-expanded等），需字体本身支持拉伸变体。
font-feature-settings设置OpenType字体特性。 启用/禁用字体的高级特性（如连字、数字样式、花体等），格式为"ss01" on，精准控制专业字体排版。
font-kerning设置字体字距调整。 控制字体字符间的间距优化（auto/normal/none），auto会根据字体和字号自动调整，提升文本可读性。
@font-face定义自定义字体。 CSS规则，用于引入外部字体文件（TTF/OTF/WOFF/WOFF2），指定字体名称、文件路径、格式等，实现网页字体自定义。
@font-palette-values定义字体调色板。 CSS规则，为彩色字体（如COLRv1格式）自定义颜色方案，指定字体颜色映射，实现彩色字体的多配色展示。

书写模式与方向

属性名描述作用
direction设置文本方向。 ltr（左到右，默认）/rtl（右到左），控制文本/布局流向。
unicode-bidi设置双向文本处理。 配合direction控制多语言文本排版（normal/embed/bidi-override）。
writing-mode设置书写模式。 控制文本排列方向（horizontal-tb/vertical-rl/vertical-lr），影响块级元素布局。
text-orientation设置文本方向。 控制垂直书写时字符的旋转方向（mixed/upright/sideways），仅对垂直书写模式生效。

背景样式

属性名描述作用
background-color设置元素背景颜色。 适用于区块区分、强调视觉焦点
background-image设置元素背景图片 / 渐变。 丰富视觉效果，适用于装饰性区块、品牌视觉
background-repeat控制背景图片的重复方式。 避免多余重复影响视觉
background-attachment设置背景图片的滚动行为。 适用于固定背景、视差效果等场景
background-position设置背景图片的显示位置。 精准控制背景视觉呈现
background-position-x设置背景图片的水平显示位置。 单独控制背景的水平定位
background-position-y设置背景图片的垂直显示位置。 单独控制背景的垂直定位
background-size设置背景图片的尺寸。 适配不同容器大小的显示需求
background-origin设置背景图片的起始显示位置。 控制背景相对于边框 / 内边距 / 内容区的起始位置
background-clip设置背景的裁剪范围。 控制背景显示的边界
background-blend-mode设置背景的混合模式。 控制背景颜色 / 图片之间的混合效果，丰富视觉层次
background（简写）背景属性简写。 按固定顺序整合多个背景属性，简化代码书写（顺序：background-color → background-image → background-position/background-size → background-repeat → background-origin → background-clip → background-attachment）

盒模型样式

基础盒模型

属性名描述作用
box-sizing设置盒模型计算方式。 控制宽高是否包含内边距和边框
box-decoration-break设置跨行/跨列时的装饰渲染方式。 控制元素被拆分时背景、边框、阴影是按段渲染还是整体连续渲染。

尺寸样式

属性名描述作用
width设置元素的宽度。 控制元素水平方向的尺寸大小
height设置元素的高度。 控制元素垂直方向的尺寸大小
max-width设置元素的最大宽度。 限制元素宽度不超过指定值，适配响应式布局
min-width设置元素的最小宽度。 保证元素宽度不小于指定值，防止内容挤压
max-height设置元素的最大高度。 限制元素高度不超过指定值，适配内容溢出控制
min-height设置元素的最小高度。 保证元素高度不小于指定值，维持布局稳定
aspect-ratio设置元素的宽高比。 强制元素保持指定的宽度/高度比例（如16:9、4:3）
block-size设置块向尺寸。 对应垂直书写模式的宽度/水平书写模式的高度，是 width/height 的逻辑替代属性。
max-block-size设置元素块级方向的最大尺寸。 适配横竖排布局的块级最大尺寸限制
min-block-size设置元素块级方向的最小尺寸。 适配横竖排布局的块级最小尺寸保障
inline-size设置行向尺寸。 对应垂直书写模式的高度/水平书写模式的宽度，是 width/height 的逻辑替代属性。
max-inline-size设置元素行内方向的最大尺寸。 适配横竖排布局的行内最大尺寸限制
min-inline-size设置元素行内方向的最小尺寸。 适配横竖排布局的行内最小尺寸保障

内边距样式

属性名描述作用
padding设置元素内边距的综合样式。 一次性定义四边内边距大小
padding-top设置元素顶部内边距。 单独控制顶部内边距大小
padding-right设置元素右侧内边距。 单独控制右侧内边距大小
padding-bottom设置元素底部内边距。 单独控制底部内边距大小
padding-left设置元素左侧内边距。 单独控制左侧内边距大小
padding-block设置元素块级方向内边距。 适配横竖排布局的块级内边距配置
padding-block-start设置元素块级起始方向内边距。 适配横竖排布局的块级起始内边距
padding-block-end设置元素块级结束方向内边距。 适配横竖排布局的块级结束内边距
padding-inline设置元素行内方向内边距。 适配横竖排布局的行内边距配置
padding-inline-start设置元素行内起始方向内边距。 适配横竖排布局的行内起始内边距
padding-inline-end设置元素行内结束方向内边距。 适配横竖排布局的行内结束内边距

边框样式

属性名描述作用
border设置元素边框的综合样式。 一次性定义边框宽度、样式、颜色
border-width设置元素边框的宽度。 控制边框的粗细
border-style设置元素边框的样式。 定义边框的显示形态
border-color设置元素边框的颜色。 自定义边框颜色
border-radius设置元素圆角。 实现元素边角圆角效果
border-top设置顶部边框综合样式。 一次性定义顶边宽度、样式、颜色
border-top-width设置顶部边框宽度。 单独控制顶边粗细
border-top-style设置顶部边框样式。 单独定义顶边形态
border-top-color设置顶部边框颜色。 单独自定义顶边颜色
border-top-left-radius设置左上角圆角。 单独控制左上角弧度
border-top-right-radius设置右上角圆角。 单独控制右上角弧度
border-left设置左侧边框综合样式。 一次性定义左边宽度、样式、颜色
border-left-width设置左侧边框宽度。 单独控制左边粗细
border-left-style设置左侧边框样式。 单独定义左边形态
border-left-color设置左侧边框颜色。 单独自定义左边颜色
border-right设置右侧边框综合样式。 一次性定义右边宽度、样式、颜色
border-right-width设置右侧边框宽度。 单独控制右边粗细
border-right-style设置右侧边框样式。 单独定义右边形态
border-right-color设置右侧边框颜色。 单独自定义右边颜色
border-bottom设置底部边框综合样式。 一次性定义底边宽度、样式、颜色
border-bottom-width设置底部边框宽度。 单独控制底边粗细
border-bottom-style设置底部边框样式。 单独定义底边形态
border-bottom-color设置底部边框颜色。 单独自定义底边颜色
border-bottom-left-radius设置左下角圆角。 单独控制左下角弧度
border-bottom-right-radius设置右下角圆角。 单独控制右下角弧度
border-image设置边框图片综合样式。 整合边框图片相关所有属性
border-image-source设置边框图片来源。 指定边框使用的图片
border-image-slice设置边框图片切片。 分割图片为九宫格区域
border-image-width设置边框图片宽度。 控制边框图片显示宽度
border-image-outset设置边框图片外扩。 控制图片超出边框的距离
border-image-repeat设置边框图片重复方式。 控制图片平铺/拉伸/环绕
border-block设置块级方向边框综合样式。 适配横竖排布局
border-block-width设置块级方向边框宽度。 控制块级方向边框粗细
border-block-style设置块级方向边框样式。 定义块级方向边框形态
border-block-color设置块级方向边框颜色。 自定义块级方向边框颜色
border-block-start设置块级起始边框综合样式。 适配横竖排布局
border-block-start-width设置块级起始边框宽度。 控制块级起始边框粗细
border-block-start-style设置块级起始边框样式。 定义块级起始边框形态
border-block-start-color设置块级起始边框颜色。 自定义块级起始边框颜色
border-block-end设置块级结束边框综合样式。 适配横竖排布局
border-block-end-width设置块级结束边框宽度。 控制块级结束边框粗细
border-block-end-style设置块级结束边框样式。 定义块级结束边框形态
border-block-end-color设置块级结束边框颜色。 自定义块级结束边框颜色
border-inline设置行内方向边框综合样式。 适配横竖排布局
border-inline-width设置行内方向边框宽度。 控制行内方向边框粗细
border-inline-style设置行内方向边框样式。 定义行内方向边框形态
border-inline-color设置行内方向边框颜色。 自定义行内方向边框颜色
border-inline-start设置行内起始边框综合样式。 适配横竖排布局
border-inline-start-width设置行内起始边框宽度。 控制行内起始边框粗细
border-inline-start-style设置行内起始边框样式。 定义行内起始边框形态
border-inline-start-color设置行内起始边框颜色。 自定义行内起始边框颜色
border-inline-end设置行内结束边框综合样式。 适配横竖排布局
border-inline-end-width设置行内结束边框宽度。 控制行内结束边框粗细
border-inline-end-style设置行内结束边框样式。 定义行内结束边框形态
border-inline-end-color设置行内结束边框颜色。 自定义行内结束边框颜色
border-start-start-radius设置起始-起始角圆角。 适配逻辑方向圆角
border-start-end-radius设置起始-结束角圆角。 适配逻辑方向圆角
border-end-start-radius设置结束-起始角圆角。 适配逻辑方向圆角
border-end-end-radius设置结束-结束角圆角。 适配逻辑方向圆角

外边距样式

属性名描述作用
margin设置元素外边距的综合样式。 一次性定义四边外边距大小
margin-top设置元素顶部外边距。 单独控制顶部外边距大小
margin-right设置元素右侧外边距。 单独控制右侧外边距大小
margin-bottom设置元素底部外边距。 单独控制底部外边距大小
margin-left设置元素左侧外边距。 单独控制左侧外边距大小
margin-block设置元素块级方向外边距。 适配横竖排布局的块级外边距配置
margin-block-start设置元素块级起始方向外边距。 适配横竖排布局的块级起始外边距
margin-block-end设置元素块级结束方向外边距。 适配横竖排布局的块级结束外边距
margin-inline设置元素行内方向外边距。 适配横竖排布局的行内外边距配置
margin-inline-start设置元素行内起始方向外边距。 适配横竖排布局的行内起始外边距
margin-inline-end设置元素行内结束方向外边距。 适配横竖排布局的行内结束外边距

布局

基础布局

属性名描述作用
display设置元素显示类型。 控制元素盒模型类型（block/inline/inline-block/flex/grid/none等），核心布局属性。
visibility设置元素可见性。 visible（可见）/hidden（隐藏但占布局）/collapse（表格行/列隐藏），区别于display:none。
content-visibility控制元素内容的渲染可见性。 auto 可使屏幕外的元素跳过渲染，大幅提升长页面的初次加载和滚动性能，同时保留对元素尺寸的预估。

浮动与清除

属性名描述作用
float设置元素的浮动方式。 控制元素向左/向右浮动，文字等内容环绕其显示
clear清除元素的浮动影响。 规定元素的哪一侧不允许有浮动元素，解决浮动布局塌陷问题
shape-outside设置环绕浮动元素的形状。 自定义文字/内容环绕浮动元素的轮廓（如圆形、多边形），替代默认矩形环绕

定位

属性名描述作用
position设置元素的定位方式。 定义元素的定位类型（static/relative/absolute/fixed/sticky），是定位布局的基础
top设置定位元素的顶部偏移。 控制定位元素相对于参考点的顶部位置
bottom设置定位元素的底部偏移。 控制定位元素相对于参考点的底部位置
left设置定位元素的左侧偏移。 控制定位元素相对于参考点的左侧位置
right设置定位元素的右侧偏移。 控制定位元素相对于参考点的右侧位置
z-index设置定位元素的层叠顺序。 控制定位元素在z轴上的显示层级，数值越大越靠前
inset定位元素的偏移简写属性。 一次性设置top/right/bottom/left四个方向的偏移，替代单独设置
inset-block设置定位元素块级方向的偏移。 适配横竖排布局的块级方向定位偏移
inset-block-start设置定位元素块级起始方向的偏移。 适配横竖排布局的块级起始定位偏移
inset-block-end设置定位元素块级结束方向的偏移。 适配横竖排布局的块级结束定位偏移
inset-inline设置定位元素行内方向的偏移。 适配横竖排布局的行内方向定位偏移
inset-inline-start设置定位元素行内起始方向的偏移。 适配横竖排布局的行内起始定位偏移
inset-inline-end设置定位元素行内结束方向的偏移。 适配横竖排布局的行内结束定位偏移
anchor-name定义元素作为锚点的名称。 配合 position-anchor 使用，使其他元素可相对于该锚点定位，实现弹窗、工具提示等精准位置绑定。
anchor-scope设置锚点名称的作用域。 限制 anchor-name 在特定子树内可见，避免命名冲突，提升组件化场景的稳定性。
position-anchor将定位元素关联到指定锚点。 值为锚点元素的 anchor-name，使该元素的位置参照锚点进行偏移（需与 position: absolute/fixed 配合）。
inset-area设置定位元素相对于锚点的区域。 类似网格区域语法（如 top span-right），快速将元素放置在锚点的四周或角落，替代手动计算偏移。

Flex 弹性布局

属性名描述作用
flexFlex 项目的简写属性。 一次性设置 flex-grow、flex-shrink、flex-basis，控制项目的伸缩规则
flex-grow设置 Flex 项目的放大比例。 定义项目在剩余空间中分配的放大权重，默认0（不放大）
flex-shrink设置 Flex 项目的缩小比例。 定义项目在空间不足时的缩小权重，默认1（允许缩小）
flex-basis设置 Flex 项目的初始尺寸。 定义项目在伸缩前的基础宽度/高度，默认auto
flex-flowFlex 容器的简写属性。 一次性设置 flex-direction 和 flex-wrap，控制容器的方向与换行规则
flex-direction设置 Flex 容器的主轴方向。 定义项目的排列方向（row/column/row-reverse/column-reverse）
flex-wrap设置 Flex 容器的换行规则。 定义项目是否换行（nowrap/wrap/wrap-reverse）
order设置 Flex 项目的排列顺序。 定义项目在容器中的显示顺序，数值越小越靠前
gap设置 Flex 项目之间的间距。 一次性定义行/列间距，替代 margin 避免间距重叠
row-gap设置 Flex 项目的行间距。 单独控制项目在主轴垂直方向的间距
column-gap设置 Flex 项目的列间距。 单独控制项目在主轴方向的间距
place-contentFlex 容器的简写属性。 一次性设置 align-content 和 justify-content，控制容器内项目的整体对齐
align-content设置 Flex 容器的侧轴整体对齐。 控制多行项目在侧轴方向的整体对齐方式
justify-content设置 Flex 容器的主轴对齐。 控制项目在主轴方向的对齐方式
place-itemsFlex 容器的简写属性。 一次性设置 align-items 和 justify-items，控制项目的默认对齐
align-items设置 Flex 容器的侧轴对齐。 控制项目在侧轴方向的默认对齐方式
justify-items设置 Flex 容器的主轴对齐（补充）。 对 Flex 项目兼容性弱，主要用于 Grid 布局
place-selfFlex 项目的简写属性。 一次性设置 align-self 和 justify-self，覆盖容器的默认对齐
align-self设置单个 Flex 项目的侧轴对齐。 覆盖容器 align-items 的默认设置
justify-self设置单个 Flex 项目的主轴对齐（补充）。 对 Flex 项目兼容性弱，主要用于 Grid 布局

Grid 网格布局

属性名描述作用
gridGrid 容器的简写属性。 一次性设置 grid-template 和 grid-auto 属性，简化网格配置
grid-templateGrid 容器的模板简写属性。 一次性设置 grid-template-rows/columns/areas
grid-template-rows设置 Grid 容器的行模板。 定义网格的行数和每行的高度
grid-template-columns设置 Grid 容器的列模板。 定义网格的列数和每列的宽度
grid-template-areas设置 Grid 容器的区域模板。 通过命名区域定义网格布局结构
grid-auto-rows设置 Grid 自动行的高度。 定义超出模板的自动生成行的高度
grid-auto-columns设置 Grid 自动列的宽度。 定义超出模板的自动生成列的宽度
grid-auto-flow设置 Grid 项目的自动流方向。 定义自动排列项目的规则（row/column/dense）
grid-rowGrid 项目的行位置简写。 一次性设置 grid-row-start 和 grid-row-end，定义项目跨行范围
grid-columnGrid 项目的列位置简写。 一次性设置 grid-column-start 和 grid-column-end，定义项目跨列范围
grid-areaGrid 项目的区域属性。 可指定项目所属命名区域，或简写 grid-row/grid-column
grid-row-start设置 Grid 项目的行起始位置。 定义项目从哪一行开始显示
grid-row-end设置 Grid 项目的行结束位置。 定义项目到哪一行结束显示
grid-column-start设置 Grid 项目的列起始位置。 定义项目从哪一列开始显示
grid-column-end设置 Grid 项目的列结束位置。 定义项目到哪一列结束显示
gap设置 Grid 项目之间的间距。 一次性定义行/列间距，替代 margin 避免间距重叠（等价于 grid-gap）
row-gap设置 Grid 项目的行间距。 单独控制网格行之间的间距（等价于 grid-row-gap）
column-gap设置 Grid 项目的列间距。 单独控制网格列之间的间距（等价于 grid-column-gap）
grid-gapGrid 容器的间距简写属性（兼容）。 等价于 gap，一次性设置 grid-row-gap 和 grid-column-gap
grid-row-gapGrid 容器的行间距（兼容）。 等价于 row-gap，控制网格行之间的间距
grid-column-gapGrid 容器的列间距（兼容）。 等价于 column-gap，控制网格列之间的间距
place-contentGrid 容器的简写属性。 一次性设置 align-content 和 justify-content，控制网格整体对齐
align-content设置 Grid 容器的块轴整体对齐。 控制网格容器内多行网格的整体对齐方式
justify-content设置 Grid 容器的行轴整体对齐。 控制网格容器内多列网格的整体对齐方式
place-itemsGrid 容器的简写属性。 一次性设置 align-items 和 justify-items，控制网格项目的默认对齐
align-items设置 Grid 项目的块轴对齐。 控制网格项目在单元格内的块轴默认对齐方式
justify-items设置 Grid 项目的行轴对齐。 控制网格项目在单元格内的行轴默认对齐方式
place-selfGrid 项目的简写属性。 一次性设置 align-self 和 justify-self，覆盖容器的默认对齐
align-self设置单个 Grid 项目的块轴对齐。 覆盖容器 align-items 的默认设置
justify-self设置单个 Grid 项目的行轴对齐。 覆盖容器 justify-items 的默认设置

多列布局

属性名描述作用
columns多列简写属性。 一次性设置column-width/column-count，缺省用默认值。
column-width设置列宽度。 定义多列布局的列宽（auto/数值），仅为参考值，容器不足时会自适应。
column-count设置列数量。 定义多列布局的列数（auto/数值），与column-width冲突时优先count。
column-gap设置列间距。 控制列之间的间距（normal/数值），默认normal（1em左右）。
column-span设置跨列数。 控制元素跨列显示（1/all），all表示跨所有列，常用作标题跨列。
column-fill设置列填充方式。 auto（列高自适应）/balance（列高平衡，默认），控制多列高度均分。
column-rule列分隔线简写属性。 一次性设置column-rule-width/style/color，缺省用默认值。
column-rule-width设置列分隔线宽度。 thin/medium/thick/数值，默认medium，控制分隔线粗细。
column-rule-style设置列分隔线样式。 none/hidden/dotted/dashed/solid等，必填项（无样式则分隔线不显示）。
column-rule-color设置列分隔线颜色。 支持颜色值/transparent，默认与文本颜色一致。

滚动与溢出

属性名描述作用
overflow设置元素溢出处理方式。 控制内容溢出时的显示（visible/hidden/scroll/auto），统管x/y轴溢出规则。
overflow-x设置水平方向溢出处理。 单独控制x轴（横向）内容溢出的显示规则（visible/hidden/scroll/auto）。
overflow-y设置垂直方向溢出处理。 单独控制y轴（纵向）内容溢出的显示规则（visible/hidden/scroll/auto）。
overflow-anchor设置滚动锚定规则。 控制浏览器是否锚定滚动位置（auto/none），避免动态内容加载导致滚动位置跳动。
overscroll-behavior设置滚动溢出行为。 控制滚动到容器边缘时的表现（auto/contain/none），阻止页面整体滚动（如弹窗内滚动不影响外层）。
overscroll-behavior-x设置水平滚动溢出行为。 单独控制x轴滚动到边缘时的表现（auto/contain/none）。
overscroll-behavior-y设置垂直滚动溢出行为。 单独控制y轴滚动到边缘时的表现（auto/contain/none）。
overscroll-behavior-block设置块向滚动溢出行为。 控制块级方向（垂直/水平，随书写模式）滚动到边缘的表现。
overscroll-behavior-inline设置行向滚动溢出行为。 控制行级方向（水平/垂直，随书写模式）滚动到边缘的表现。
scroll-behavior设置滚动行为。 控制锚点/滚动条滚动时的动画（auto/smooth），实现平滑滚动效果。
scroll-margin设置滚动边距。 定义滚动吸附时元素与滚动容器的外边距，统管所有方向，适配滚动快照。
scroll-margin-top设置顶部滚动边距。 单独定义滚动吸附时元素顶部与容器的外边距。
scroll-margin-bottom设置底部滚动边距。 单独定义滚动吸附时元素底部与容器的外边距。
scroll-margin-left设置左侧滚动边距。 单独定义滚动吸附时元素左侧与容器的外边距。
scroll-margin-right设置右侧滚动边距。 单独定义滚动吸附时元素右侧与容器的外边距。
scroll-margin-block设置块向滚动边距。 统管块级方向（垂直/水平）的滚动边距，适配书写模式。
scroll-margin-block-start设置块向起始滚动边距。 定义块级方向起始端的滚动边距（如垂直书写时的左侧）。
scroll-margin-block-end设置块向结束滚动边距。 定义块级方向结束端的滚动边距（如垂直书写时的右侧）。
scroll-margin-inline设置行向滚动边距。 统管行级方向（水平/垂直）的滚动边距，适配书写模式。
scroll-margin-inline-start设置行向起始滚动边距。 定义行级方向起始端的滚动边距（如水平书写时的左侧）。
scroll-margin-inline-end设置行向结束滚动边距。 定义行级方向结束端的滚动边距（如水平书写时的右侧）。
scroll-padding设置滚动内边距。 定义滚动容器的滚动吸附内边距，统管所有方向，适配滚动快照。
scroll-padding-top设置顶部滚动内边距。 单独定义滚动容器顶部的滚动吸附内边距。
scroll-padding-bottom设置底部滚动内边距。 单独定义滚动容器底部的滚动吸附内边距。
scroll-padding-left设置左侧滚动内边距。 单独定义滚动容器左侧的滚动吸附内边距。
scroll-padding-right设置右侧滚动内边距。 单独定义滚动容器右侧的滚动吸附内边距。
scroll-padding-block设置块向滚动内边距。 统管块级方向的滚动吸附内边距，适配书写模式。
scroll-padding-block-start设置块向起始滚动内边距。 定义块级方向起始端的滚动吸附内边距。
scroll-padding-block-end设置块向结束滚动内边距。 定义块级方向结束端的滚动吸附内边距。
scroll-padding-inline设置行向滚动内边距。 统管行级方向的滚动吸附内边距，适配书写模式。
scroll-padding-inline-start设置行向起始滚动内边距。 定义行级方向起始端的滚动吸附内边距。
scroll-padding-inline-end设置行向结束滚动内边距。 定义行级方向结束端的滚动吸附内边距。
scroll-snap-align设置滚动吸附对齐方式。 控制元素在滚动容器中的吸附位置（none/start/center/end），核心滚动快照属性。
scroll-snap-type设置滚动吸附类型。 控制滚动容器的吸附规则（none/x/y/both + mandatory/proximity），决定是否强制吸附。
scroll-snap-stop设置滚动吸附停止规则。 控制滚动时是否必须在每个吸附点停止（normal/always），强化滚动快照的精准性。
scrollbar-color设置滚动条颜色。 定义滚动条轨道和滑块的颜色（auto/颜色值），自定义滚动条外观（仅支持部分浏览器）。
resize设置元素是否可调整尺寸。 控制用户能否拖动调整元素大小（none/both/horizontal/vertical），常用于文本域、自定义容器。

视觉效果

滤镜与混合

属性名描述作用
opacity设置元素透明度。 取值0-1（0全透，1不透明），影响元素及所有子元素，可叠加背景透明。
box-shadow为元素添加阴影。 增强元素视觉层次
box-reflect设置元素倒影效果。 控制元素倒影的方向、间距与遮罩，非标准属性，仅部分浏览器支持。
backdrop-filter设置元素背景滤镜效果。 对元素后方内容应用模糊、亮度调整等滤镜（blur/brightness等），实现毛玻璃效果，不影响元素自身内容。
filter设置元素滤镜效果。 对元素自身内容（含背景、子元素）应用模糊、灰度等滤镜（blur/grayscale等），核心视觉特效属性。
mix-blend-mode设置元素混合模式。 控制元素与下方内容的颜色混合方式（normal/multiply/screen/overlay等），实现叠加/滤色等视觉效果。
isolation设置元素隔离上下文。 控制是否创建新堆叠上下文（auto/isolate），避免mix-blend-mode效果溢出，配合混合/滤镜使用。

遮罩与裁剪

属性名描述作用
mask遮罩简写属性。 一次性设置mask-image/mode/repeat/position/clip/origin/size等，缺省用默认值。
mask-image设置遮罩图像。 使用url()引用图像作为遮罩，none为无遮罩（默认），优先级高于背景。
mask-mode设置遮罩模式。 控制遮罩解析方式（alpha/luminance/match-source），决定遮罩生效逻辑。
mask-repeat设置遮罩重复。 控制遮罩图像平铺方式（no-repeat/repeat/repeat-x/repeat-y/space/round）。
mask-position设置遮罩位置。 控制遮罩图像对齐位置，同background-position取值规则。
mask-clip设置遮罩裁剪范围。 控制遮罩生效区域（border-box/padding-box/content-box/viewport等）。
mask-origin设置遮罩原点。 控制遮罩图像定位原点，同background-origin取值规则。
mask-size设置遮罩尺寸。 控制遮罩图像大小（auto/length/percentage/cover/contain）。
mask-composite设置遮罩合成。 控制多个遮罩图像叠加方式（add/subtract/intersect/exclude）。
mask-type设置遮罩类型。 区分遮罩为亮度/Alpha类型（luminance/alpha），影响透明度计算。
clip-path (clip)设置元素裁剪路径。 替代旧版clip属性，通过circle/rect/path()等路径裁剪元素显示区域，实现不规则形状。

偏移与运动

属性名描述作用
offset偏移简写属性。 一次性设置offset-path/distance/rotate/anchor/position，控制元素路径运动。
offset-anchor设置偏移锚点。 定义元素沿路径运动的参考点（默认元素中心），支持像素/百分比/方位词。
offset-distance设置偏移距离。 控制元素沿offset-path移动的距离（百分比/长度值），默认0。
offset-path设置偏移路径。 定义元素运动路径（none/path()/url()/基本形状），核心路径运动属性。
offset-position设置偏移初始位置。 定义offset-path为none时元素位置，同background-position。
offset-rotate设置偏移旋转。 控制元素沿路径运动的旋转方式（auto/auto-reverse/角度/0）。

媒体与图像

属性名描述作用
object-fit设置媒体元素适配方式。 控制img/video等在容器内的缩放/裁剪（fill/cover/contain/scale-down/none）。
object-position设置媒体元素位置。 控制img/video在容器内的对齐位置，支持像素/百分比/方位词（默认50% 50%）。
image-rendering设置图像渲染方式。 控制图像缩放后的清晰度（auto/crisp-edges/pixelated），影响低分辨率图显示。
paint-order设置图形绘制顺序。 控制SVG/文本的填充、描边、标记的绘制顺序（normal/fill stroke markers/自定义顺序），调整描边覆盖层级等视觉效果。
marker标记简写属性。 一次性设置marker-start/middle/end，控制SVG路径/列表的标记样式。
marker-start设置起始标记。 定义SVG路径/列表起始位置的标记样式（如箭头、圆点）。
marker-middle设置中间标记。 定义SVG路径/列表中间节点的标记样式，仅对多段路径生效。
marker-end设置结束标记。 定义SVG路径/列表结束位置的标记样式（如箭头、圆点），常用作路径终点装饰。

变形样式

属性名/函数描述作用
transform元素变形的核心属性。 承载所有 2D/3D 变形函数，支持多个函数组合使用（如 transform: translate(10px) rotate3d(1,0,0,45deg)）
transform-origin设置变形的原点。 定义所有变形函数的参考点，默认元素中心（50% 50%），支持像素、百分比、方位词（left/top 等）
2D 变形函数
translate()2D 平移。 简写 translate(X, Y)，同时控制 X/Y 轴偏移，Y 省略则为 0
translateX()2D 水平平移。 仅控制 X 轴方向的位置偏移（正值右移，负值左移）
translateY()2D 垂直平移。 仅控制 Y 轴方向的位置偏移（正值下移，负值上移）
rotate()2D 旋转。 等价于 rotateZ()，绕 Z 轴旋转指定角度（正值顺时针，负值逆时针）
rotateZ()2D 旋转（等价 3D 写法）。 与 3D rotate() 完全等价，绕 Z 轴旋转
scale()2D 缩放。 简写 scale(X, Y)，同时控制 X/Y 轴缩放比例，Y 省略则与 X 相同（>1 放大，<1 缩小）
scaleX()2D 水平缩放。 仅控制 X 轴方向的缩放比例
scaleY()2D 垂直缩放。 仅控制 Y 轴方向的缩放比例
skew()2D 倾斜。 简写 skew(X, Y)，同时控制 X/Y 轴倾斜角度，Y 省略则为 0
skewX()2D 水平倾斜。 仅控制 X 轴方向的倾斜角度
skewY()2D 垂直倾斜。 仅控制 Y 轴方向的倾斜角度
3D 变形函数
translateZ()3D 深度平移。 仅控制 Z 轴方向的偏移（正值靠近观察者，负值远离）
translate3d()3D 平移。 完整写法 translate3d(X, Y, Z)，同时控制 X/Y/Z 三轴偏移，缺一不可
rotateX()3D 绕 X 轴旋转。 元素沿水平轴旋转（上下翻转）
rotateY()3D 绕 Y 轴旋转。 元素沿垂直轴旋转（左右翻转）
rotateZ()3D 旋转（等价 2D 写法）。 与 2D rotate() 完全等价，绕 Z 轴旋转
rotate3d()3D 自定义轴旋转。 rotate3d(x, y, z, angle)，通过 x/y/z 向量定义旋转轴，angle 为旋转角度
scaleZ()3D 深度缩放。 仅控制 Z 轴方向的缩放比例（需配合 3D 透视生效）
scale3d()3D 缩放。 完整写法 scale3d(X, Y, Z)，同时控制 X/Y/Z 三轴缩放比例
skewZ()3D 绕 Z 轴倾斜。 元素沿 Z 轴倾斜（实际开发中极少使用）
skew3d()3D 倾斜。 完整写法 skew3d(X, Y, Z)，控制 X/Y/Z 三轴倾斜（兼容性差，极少使用）
perspective()3D 透视函数。 给单个元素设置透视效果（如 transform: perspective(500px) rotateX(30deg)），替代父元素的 perspective 属性
3D 辅助属性
perspective-origin3D 透视原点。 定义透视视角的观察点位置，默认元素中心，影响 3D 变形的视觉效果
transform-style3D 空间保留。 控制子元素是否保留 3D 空间（flat：扁平化，preserve-3d：保留 3D），需给父元素设置
其他属性/函数
zoom非标准缩放。 简单控制元素整体缩放（值：数字/百分比），仅 IE/Chrome 支持，会改变元素布局，不推荐替代 scale()
translate平移通用指代。 涵盖 2D/3D 所有平移相关函数（translate()/translateX/Y/Z/3d()）的统称
rotate旋转通用指代。 涵盖 2D/3D 所有旋转相关函数（rotate()/rotateX/Y/Z/3d()）的统称
scale缩放通用指代。 涵盖 2D/3D 所有缩放相关函数（scale()/scaleX/Y/Z/3d()）的统称
skew倾斜通用指代。 涵盖 2D/3D 所有倾斜相关函数（skew()/skewX/Y/Z/3d()）的统称
perspective透视通用指代。 涵盖 perspective() 函数和原 perspective 属性的统称，用于 3D 透视效果控制

过渡样式

属性名描述作用
transition过渡效果的简写属性。 一次性设置 transition-property、transition-duration、transition-timing-function、transition-delay
transition-property设置过渡效果的 CSS 属性。 指定哪些 CSS 属性需要应用过渡（如 width、background-color，all 表示所有属性）
transition-duration设置过渡效果的持续时间。 定义过渡从开始到结束的时长（必填，默认0无过渡，单位：s/ms）
transition-timing-function设置过渡效果的速度曲线。 定义过渡的速率变化（如 ease、linear、ease-in、ease-out、cubic-bezier 自定义）
transition-delay设置过渡效果的延迟时间。 定义触发过渡后延迟多久开始执行（单位：s/ms，默认0立即执行）

动画样式

属性名/规则描述作用
@keyframes动画关键帧规则。 定义动画的关键帧（from/to 或百分比），是动画的核心定义（如 @keyframes move { 0% {left:0;} 100% {left:100px;} }）
animation动画的简写属性。 （一次性设置，顺序：name duration timing-function delay iteration-count direction fill-mode play-state）
animation-name设置动画名称。 指定要应用的 @keyframes 动画名称（必填，无默认值）
animation-duration设置动画持续时间。 定义动画完成一次循环的时长（必填，默认0无动画，单位：s/ms）
animation-timing-function设置动画速度曲线。 定义动画的速率变化（默认ease，可选linear/ease-in/ease-out/ease-in-out/cubic-bezier 自定义）
animation-delay设置动画延迟时间。 定义元素加载后延迟多久执行动画（默认0立即执行，单位：s/ms，负值表示动画从该时间点开始）
animation-iteration-count设置动画循环次数。 默认1次，可选数字或 infinite（无限循环）
animation-direction设置动画播放方向。 默认normal（正向），可选reverse（反向）/alternate（正反向交替）/alternate-reverse（反向交替）
animation-fill-mode设置动画填充模式。 定义动画执行前后元素的样式（默认none，可选forwards/backwards/both）
animation-play-state设置动画播放状态。 默认running（播放），可选paused（暂停），常用于JS控制动画启停
backface-visibility设置元素背面可见性。 控制3D变换时元素背面是否可见（visible/hidden），常用于3D翻转动画隐藏翻面内容。
animation-timeline指定动画的时间线。 可将动画与滚动进度关联（scroll()），实现滚动驱动动画；也可与视图进度关联（view()），控制元素进入/离开视口时的动画。
animation-range设置动画在时间线中的有效范围。 配合 animation-timeline 使用，定义动画从时间线的哪个位置开始、哪个位置结束，精确控制滚动或视图驱动的动画区间。
interpolate-size允许对尺寸属性进行插值动画。 启用 width、height 等原本无法平滑过渡的属性在动画或过渡中产生渐变效果（需配合 transition 或 animation）。

生成内容与计数器

属性名/规则描述作用
counter-increment递增计数器。 定义计数器名称及步长（默认+1），控制计数器数值增加。
counter-reset重置计数器。 定义计数器名称及初始值（默认0），初始化/重置计数器数值。
counter-set设置计数器值。 直接设置计数器数值（替代reset+increment），更灵活控制计数。
@counter-style自定义计数器样式。 定义自定义计数符号（如中文数字、图标），扩展默认计数类型。
content生成内容。 配合:before/:after伪元素生成文本/图标/计数器内容（none/字符串/attr()/counter()）。
quotes设置引用符号。 定义嵌套引用的引号样式（如「」、""、''），配合content: open-quote/close-quote使用。

打印样式

属性名描述作用
break-after设置元素后的换行/分页规则。 控制在元素之后是否换行、换列或换页（auto/avoid/always/page/column等），适配多列/打印布局。
break-before设置元素前的换行/分页规则。 控制在元素之前是否换行、换列或换页（auto/avoid/always/page/column等），核心分页控制属性。
break-inside设置元素内部的换行/分页规则。 控制是否允许在元素内部换行、换列或换页（auto/avoid/page/column），避免元素被拆分。
page-break-before设置元素前的分页规则（旧版属性）。 仅控制分页（auto/always/avoid/left/right），功能被break-before替代，用于兼容旧浏览器。
page-break-inside设置元素内部的分页规则（旧版属性）。 仅控制是否允许元素内分页（auto/avoid），功能被break-inside替代。
page-break-after设置元素后的分页规则（旧版属性）。 仅控制元素后是否分页（auto/always/avoid/left/right），功能被break-after替代。
widows设置打印时页面顶部最小行数。 控制分页后页面顶部至少显示的文本行数（默认2），避免单行文本孤立在页面顶部，优化打印排版。
orphans设置打印时页面底部最小行数。 控制分页前页面底部至少显示的文本行数（默认2），避免单行文本孤立在页面底部，适配打印场景。

用户交互

属性名描述作用
user-select控制用户是否可以选中文本。 适用于禁止复制、优化按钮 / 验证码交互体验的场景
cursor设置鼠标指针样式。 控制鼠标悬浮在元素上时的指针形状（default/pointer/hover/move/loading等），适配不同交互场景的视觉反馈。
pointer-events设置元素指针事件响应。 控制元素是否响应鼠标/触摸事件（auto/none），none时元素可穿透，常用于遮罩层点击穿透场景。

表单控件样式

属性名描述作用
accent-color设置表单控件强调色。 自定义复选框、单选框、进度条等原生控件的主题色，默认随系统。
caret-color设置光标颜色。 自定义输入框/可编辑元素的文本光标颜色，默认与文字颜色一致。
field-sizing设置表单控件尺寸自适应内容。 应用于 <input>、<textarea> 等元素，使其宽度随输入内容自动伸缩，告别手动计算宽度。

轮廓样式

属性名描述作用
outline轮廓简写属性。 一次性设置 width/style/color，顺序无强制，缺省用默认值（style 为必填项）。
outline-width设置轮廓宽度。 常用：thin/thick/medium 或具体数值（px/em），默认medium。
outline-style设置轮廓样式。 必填项，常用：solid/dashed/dotted/double/none（无轮廓）。
outline-color设置轮廓颜色。 支持颜色值/transparent（透明），默认与文字颜色一致。
outline-offset设置轮廓偏移。 控制轮廓与元素边框的间距，支持正负值（px/em），默认0。

列表样式

属性名描述作用
list-style列表样式简写属性。 一次性设置 type/position/image，顺序无强制要求（缺省则用默认值）。
list-style-type设置列表标记类型。 常用：disc（实心圆）、circle（空心圆）、square（方块）、decimal（数字）、none（无标记）。
list-style-position设置列表标记位置。 inside：标记在列表项内；outside：标记在列表项外（默认）。
list-style-image设置列表标记图片。 使用 url() 引用图片替代默认标记，优先级高于 list-style-type。

表格样式

属性名描述作用
table-layout设置表格布局算法。 fixed：固定列宽，性能优；auto：自适应内容（默认）。
border-collapse设置表格边框合并。 collapse：合并边框（常用）；separate：分离边框（默认）。
border-spacing设置单元格边框间距。 仅在 border-collapse: separate 时生效，控制水平/垂直间距。
caption-side设置表格标题位置。 top：标题在上（默认）；bottom：标题在下。
empty-cells设置空单元格显示。 show：显示空单元格（默认）；hide：隐藏空单元格边框背景。

杂项 (at-rules & 其他)

属性名/规则描述作用
color-scheme设置元素的操作系统配色方案。 适配系统浅色/深色模式，控制表单、滚动条等原生控件的外观
all重置/继承所有属性。 控制元素的所有CSS属性取值（initial/inherit/unset/revert/revert-layer），快速重置元素样式或继承父元素样式。
@import导入外部CSS样式表。 用于在当前CSS文件中引入其他CSS文件，可加媒体查询条件（如@import "style.css" screen），需放在样式表最顶部。
@charset声明CSS文件编码。 定义当前CSS文件的字符编码（如@charset "UTF-8"），需放在文件最开头，解决中文等字符乱码问题。
@container容器查询规则。 基于容器的尺寸/样式条件应用样式（如@container (width > 500px) { ... }），实现组件级响应式，区别于@media的视口查询。
@layer样式层规则。 定义样式优先级层级（如@layer base, component;），层级内样式优先级低于外层，解决样式优先级冲突问题。
@media媒体查询规则。 基于设备/视口条件（如屏幕尺寸、分辨率、深色模式）应用样式（如@media (max-width: 768px) { ... }），核心响应式布局属性。
@namespace命名空间规则。 为XML/HTML元素定义命名空间（如SVG/HTML），用于区分不同命名空间的元素样式（如@namespace svg url("http://www.w3.org/2000/svg")）。
@page打印页面规则。 定义打印时的页面样式（如页面尺寸、边距、分页符），如@page { margin: 2cm; }，适配打印排版需求。
@property自定义CSS属性规则。 注册自定义CSS属性并指定类型/初始值/继承性（如@property --color { syntax: "<color>"; initial-value: red; inherits: false; }），支持属性动画。
@scope样式作用域规则。 限定样式的生效范围（如@scope (.card) to (.card-footer) { ... }），精准控制样式作用域，减少选择器冲突。
@starting-style初始样式规则。 定义元素动画的初始状态（即使初始状态不在DOM中），如@starting-style { .box { opacity: 0; } }，优化动画起始表现。
@supports特性检测规则。 检测浏览器是否支持某CSS特性（如@supports (display: grid) { ... }），实现特性降级/增强，提升兼容性。
avatar
文章
阅读
粉丝