📚 CSS 属性大全

完整的 CSS 属性参考手册，按功能分类，共 12 大类，200+ 属性

📖 本页面收录了 CSS 中常用的 200+ 个属性，按功能分为 12 个大类，每个大类下又细分为多个小类。表格中列出了每个属性的名称、常用值和作用说明。

📐 显示与布局

显示类型

名称 常用值 作用
display block inline inline-block none 定义元素的显示类型
visibility visible hidden collapse 设置元素是否可见（hidden 占位，none 不占位）
opacity 0 0.5 1 设置元素的透明度（0-1 之间）

布局类型

名称 常用值 作用
display flex grid table flow 定义布局模式（弹性/网格/表格/普通流）
float left right none 设置元素浮动
clear left right both none 清除浮动影响

📦 盒模型

尺寸

名称 常用值 作用
width auto 100% 200px max-content 设置元素宽度
height auto 100% 100vh 40px 设置元素高度
min-width 0 200px 100% 设置最小宽度
max-width none 1200px 100% 设置最大宽度
min-height 0 100vh 200px 设置最小高度
max-height none 500px 100% 设置最大高度

外边距

名称 常用值 作用
margin 0 10px 1rem 0 auto 设置外边距（简写）
margin-top 0 10px 1rem 设置上外边距
margin-right 0 10px auto 设置右外边距
margin-bottom 0 10px 1rem 设置下外边距
margin-left 0 10px auto 设置左外边距

内边距

名称 常用值 作用
padding 0 10px 1rem 20px 40px 设置内边距（简写）
padding-top 0 10px 1rem 设置上内边距
padding-right 0 10px 1rem 设置右内边距
padding-bottom 0 10px 1rem 设置下内边距
padding-left 0 10px 1rem 设置左内边距

盒模型

名称 常用值 作用
box-sizing content-box border-box 定义盒模型计算方式（border-box 包含 padding 和 border）
box-shadow none 0 2px 4px rgba(0,0,0,0.1) 0 4px 12px rgba(0,0,0,0.15) 设置盒阴影
outline none 1px solid #ccc 2px solid primary 设置元素轮廓（不占空间）
outline-offset 0 2px 4px 设置轮廓偏移量

📝 文本排版

文本对齐与装饰

名称 常用值 作用
text-align left center right justify 设置文本水平对齐方式
text-decoration none underline line-through overline 设置文本装饰线
text-decoration-color #ff0000 currentColor 设置文本装饰线颜色
text-decoration-style solid dashed dotted wavy 设置文本装饰线样式
text-underline-offset auto 2px 4px 设置下划线偏移

文本间距

名称 常用值 作用
line-height normal 1.5 1.6 24px 设置行高
letter-spacing normal 1px 2px -0.5px 设置字符间距
word-spacing normal 4px 8px 设置单词间距
text-indent 0 2em 20px 设置文本缩进

文本换行

名称 常用值 作用
white-space normal nowrap pre pre-wrap pre-line 设置空白处理方式
word-break normal break-all keep-all break-word 设置单词换行规则
word-wrap / overflow-wrap normal break-word 设置长单词换行
text-overflow clip ellipsis 设置文本溢出显示（需配合 overflow:hidden）

文本颜色

名称 常用值 作用
color #333 rgb(0,0,0) rgba(0,0,0,0.5) currentColor 设置文本颜色
text-shadow none 1px 1px 2px rgba(0,0,0,0.3) 设置文本阴影

🔤 字体

字体样式

名称 常用值 作用
font-family Arial Helvetica sans-serif serif monospace 设置字体族（可指定多个，逗号分隔）
font-size 14px 16px 1rem 1.5em 设置字体大小
font-weight normal bold 400 500 600 700 设置字体粗细
font-style normal italic oblique 设置字体样式（斜体）
font-variant normal small-caps 设置字体变体（小型大写字母）

字体简写

名称 常用值 作用
font 16px/1.5 Arial bold 14px sans-serif 字体简写（style weight size/line-height family）

Web 字体

名称 常用值 作用
@font-face font-family src font-weight 定义自定义字体（规则，非属性）
font-display auto swap block fallback 控制 Web 字体加载显示策略

🎨 背景

背景样式

名称 常用值 作用
background #fff transparent url(img.jpg) 背景简写属性
background-color #ffffff transparent rgba(0,0,0,0.5) 设置背景颜色
background-image none url(img.jpg) linear-gradient() radial-gradient() 设置背景图像
background-size auto cover contain 100% 100% 设置背景图像尺寸
background-position center top left 0 0 50% 50% 设置背景图像位置
background-repeat repeat no-repeat repeat-x repeat-y 设置背景图像重复方式
background-attachment scroll fixed local 设置背景图像是否固定
background-origin border-box padding-box content-box 设置背景图像定位区域
background-clip border-box padding-box content-box text 设置背景图像裁剪区域

渐变

名称 常用值 作用
linear-gradient() to right, #667eea, #764ba2 45deg, red, blue 线性渐变
radial-gradient() circle, red, blue ellipse at center, #fff, #000 径向渐变
conic-gradient() from 0deg, red, blue, red 锥形渐变

⬜ 边框

边框样式

名称 常用值 作用
border 1px solid #ccc 2px dashed #333 none 边框简写（width style color）
border-width 1px 2px thin medium thick 设置边框宽度
border-style solid dashed dotted double none 设置边框样式
border-color #ccc transparent currentColor 设置边框颜色

单边边框

名称 常用值 作用
border-top 1px solid #ccc 设置上边框
border-right 1px solid #ccc 设置右边框
border-bottom 1px solid #ccc 设置下边框
border-left 1px solid #ccc 设置左边框

圆角

名称 常用值 作用
border-radius 0 4px 8px 50% 9999px 设置圆角半径
border-top-left-radius 4px 50% 设置左上角圆角
border-top-right-radius 4px 50% 设置右上角圆角
border-bottom-left-radius 4px 50% 设置左下角圆角
border-bottom-right-radius 4px 50% 设置右下角圆角

📍 定位

定位方式

名称 常用值 作用
position static relative absolute fixed sticky 设置定位方式
top auto 0 10px 50% 设置上偏移量
right auto 0 10px 50% 设置右偏移量
bottom auto 0 10px 50% 设置下偏移量
left auto 0 10px 50% 设置左偏移量
z-index auto 1 10 100 999 设置堆叠顺序

🔄 弹性盒子 (Flexbox)

容器属性

名称 常用值 作用
display flex inline-flex 定义弹性容器
flex-direction row row-reverse column column-reverse 设置主轴方向
flex-wrap nowrap wrap wrap-reverse 设置是否换行
flex-flow row wrap column nowrap flex-direction 和 flex-wrap 简写
justify-content flex-start center flex-end space-between space-around space-evenly 设置主轴对齐方式
align-items stretch flex-start center flex-end baseline 设置交叉轴对齐方式
align-content flex-start center flex-end space-between space-around 设置多行交叉轴对齐方式
gap 0 8px 1rem 20px 40px 设置项目间距

项目属性

名称 常用值 作用
flex auto none 1 0 0 auto flex-grow, flex-shrink, flex-basis 简写
flex-grow 0 1 2 设置放大比例
flex-shrink 0 1 设置缩小比例
flex-basis auto 0 200px 设置分配剩余空间前的基准大小
order 0 1 -1 设置排列顺序
align-self auto flex-start center flex-end stretch 设置单个项目的交叉轴对齐

⬛ 网格布局 (Grid)

容器属性

名称 常用值 作用
display grid inline-grid 定义网格容器
grid-template-columns 100px 100px 1fr 1fr repeat(3, 1fr) 200px auto 定义列宽
grid-template-rows 100px 100px 1fr 1fr repeat(3, 1fr) 定义行高
grid-template-areas "header header" "sidebar content" 定义网格区域
gap 0 16px 20px 40px 设置行列间距（简写）
grid-column-gap 16px 1rem 设置列间距
grid-row-gap 16px 1rem 设置行间距
justify-items stretch start center end 设置列轴单元格内容对齐
align-items stretch start center end 设置行轴单元格内容对齐
justify-content start center end space-between 设置整个网格的列轴对齐
align-content start center end space-between 设置整个网格的行轴对齐
grid-auto-columns auto 100px 1fr 设置隐式列大小
grid-auto-rows auto 100px 1fr 设置隐式行大小
grid-auto-flow row column row dense column dense 设置自动布局算法

项目属性

名称 常用值 作用
grid-column 1 / 3 span 2 设置列起始和结束（简写）
grid-row 1 / 3 span 2 设置行起始和结束（简写）
grid-area header 1 / 1 / 2 / 3 设置网格区域（简写）
justify-self stretch start center end 设置单个项目的列轴对齐
align-self stretch start center end 设置单个项目的行轴对齐

🎬 变换与动画

变换

名称 常用值 作用
transform none translateX(10px) translateY(10px) scale(1.5) rotate(45deg) skewX(10deg) 设置 2D/3D 变换
transform-origin center top left 50% 50% 设置变换原点
transform-style flat preserve-3d 设置 3D 变换样式
perspective none 1000px 设置透视距离
perspective-origin center 50% 50% 设置透视原点

过渡

名称 常用值 作用
transition all 0.3s ease opacity 0.2s transform 0.3s ease-in-out 设置过渡效果（简写）
transition-property all opacity transform 设置过渡属性
transition-duration 0.3s 500ms 设置过渡持续时间
transition-timing-function ease linear ease-in ease-out ease-in-out 设置过渡时间函数
transition-delay 0s 0.5s 设置过渡延迟

动画

名称 常用值 作用
animation slide 1s ease infinite 设置动画（简写）
animation-name none slide fade 设置动画名称（@keyframes）
animation-duration 1s 500ms 设置动画持续时间
animation-timing-function ease linear steps(4) 设置动画时间函数
animation-delay 0s 1s 设置动画延迟
animation-iteration-count 1 infinite 3 设置动画播放次数
animation-direction normal reverse alternate alternate-reverse 设置动画播放方向
animation-fill-mode none forwards backwards both 设置动画填充模式
animation-play-state running paused 设置动画播放状态

✨ 视觉效果

滤镜

名称 常用值 作用
filter none blur(5px) brightness(1.5) contrast(2) grayscale(100%) hue-rotate(90deg) invert(1) opacity(0.5) saturate(2) sepia(1) 设置图形效果（模糊/亮度/对比度等）
backdrop-filter none blur(10px) grayscale(100%) 设置元素背景的效果（毛玻璃）

混合模式

名称 常用值 作用
mix-blend-mode normal multiply screen overlay darken lighten 设置元素内容与背景的混合模式
background-blend-mode normal multiply screen overlay 设置背景图像/颜色的混合模式

裁剪与遮罩

名称 常用值 作用
clip-path none circle(50%) polygon(50% 0%, 0% 100%, 100% 100%) inset(10%) 设置裁剪区域
mask none url(#mask) linear-gradient() 设置遮罩（简写）
mask-image none url(#mask) 设置遮罩图像

光标

名称 常用值 作用
cursor default pointer text move not-allowed grab grabbing zoom-in zoom-out 设置鼠标光标样式

🔧 其他

列表

名称 常用值 作用
list-style none disc inside decimal 列表样式简写
list-style-type none disc circle square decimal 设置列表项标记类型
list-style-position outside inside 设置列表项标记位置
list-style-image none url(bullet.png) 设置列表项标记图像

表格

名称 常用值 作用
border-collapse separate collapse 设置表格边框是否合并
border-spacing 0 8px 8px 16px 设置单元格间距
table-layout auto fixed 设置表格布局算法
caption-side top bottom 设置表格标题位置
empty-cells show hide 设置空单元格是否显示

内容生成

名称 常用值 作用
content normal none "text" attr(data-text) counter(item) 设置伪元素内容
counter-increment none item item 2 设置计数器递增
counter-reset none item item 0 设置计数器重置

交互

名称 常用值 作用
pointer-events auto none 设置元素是否响应指针事件
resize none both horizontal vertical 设置元素是否可调整大小
overflow visible hidden scroll auto 设置内容溢出处理方式
overflow-x visible hidden scroll auto 设置水平溢出处理方式
overflow-y visible hidden scroll auto 设置垂直溢出处理方式
scroll-behavior auto smooth 设置滚动行为
user-select auto none text all 设置文本是否可选择

列布局

名称 常用值 作用
column-count auto 2 3 设置列数
column-width auto 200px 300px 设置列宽
column-gap normal 16px 1rem 设置列间距
column-rule 1px solid #ccc 设置列分隔线（简写）
column-span none all 设置元素跨列

其他属性

名称 常用值 作用
object-fit contain cover fill none 设置图像/视频适应方式
object-position center top left 50% 50% 设置图像/视频位置
caret-color auto #ff0000 transparent 设置输入框光标颜色
accent-color #2563eb auto 设置表单控件强调色
place-content center start space-between align-content + justify-content 简写
place-items center start stretch align-items + justify-items 简写
isolation auto isolate 创建新的堆叠上下文
will-change auto transform opacity 提示浏览器哪些属性会变化