您现在位置> 首页 > 编程 > HTML CSS > CSS
← CSS 基础总结 CSS border 边框 →

CSS 属性参考手册

著
原创 2025-09-04 CSS 已有人查阅

CSS 属性完整参考手册

前言

本手册为代码号在实践中整理的所有主流 CSS 属性，为前端开发者，学员提供全面的参考指南。每个属性均包含详细说明、CSS版本和浏览器兼容性信息，帮助您清楚认识CSS 属性和高效的进行网页样式开发。

CSS 属性分类速查表Ctrl+G查询

背景属性

属性 描述 CSS版本 兼容性
background 复合属性，设置所有背景属性 1 所有浏览器
background-color 设置元素的背景颜色 1 所有浏览器
background-image 设置元素的背景图像 1 所有浏览器
background-repeat 设置背景图像是否及如何重复 1 所有浏览器
background-attachment 设置背景图像是否固定或随页面滚动 1 所有浏览器
background-position 设置背景图像的起始位置 1 所有浏览器
background-size 规定背景图像的尺寸 3 IE9+
background-clip 规定背景的绘制区域 3 IE9+
background-origin 规定背景图像的定位区域 3 IE9+
background-blend-mode 定义背景层的混合模式 3 IE不支持

边框属性

属性 描述 CSS版本 兼容性
border 复合属性，设置所有边框属性 1 所有浏览器
border-width 设置元素边框的宽度 1 所有浏览器
border-color 设置元素边框的颜色 1 所有浏览器
border-style 设置元素边框的样式 1 所有浏览器
border-radius 设置元素圆角边框 3 IE9+
border-collapse 设置表格边框是否合并为单一边框 2 所有浏览器
border-spacing 设置相邻单元格边框间的距离 2 所有浏览器
border-image 使用图像创建边框 3 IE11+
border-image-source 指定用作边框的图像路径 3 IE11+
border-image-slice 指定边框图像的切片方式 3 IE11+
border-image-width 指定边框图像的宽度 3 IE11+
border-image-outset 指定边框图像超出边框盒的量 3 IE11+
border-image-repeat 指定边框图像如何重复 3 IE11+

文本属性

属性 描述 CSS版本 兼容性
color 设置文本颜色 1 所有浏览器
font 复合属性，设置所有字体属性 1 所有浏览器
font-family 设置字体族科 1 所有浏览器
font-size 设置字体大小 1 所有浏览器
font-weight 设置字体的粗细 1 所有浏览器
font-style 设置字体风格 1 所有浏览器
font-variant 设置小型大写字母字体 1 所有浏览器
font-stretch 拉伸或收缩字体 3 IE不支持
text-align 设置文本对齐方式 1 所有浏览器
text-decoration 设置文本修饰 1 所有浏览器
text-transform 控制文本大小写 1 所有浏览器
text-indent 设置文本首行缩进 1 所有浏览器
text-shadow 设置文本阴影效果 3 IE10+
text-overflow 设置文本溢出时的显示方式 3 IE6+
line-height 设置行高 1 所有浏览器
letter-spacing 设置字符间距 1 所有浏览器
word-spacing 设置单词间距 1 所有浏览器
word-break 设置文本换行规则 3 IE5.5+
word-wrap 允许长单词换行到下一行 3 IE5.5+
white-space 设置元素内空白的处理方式 1 所有浏览器
writing-mode 设置文本水平或垂直排布 3 IE5.5+
text-orientation 设置文本方向 3 IE不支持
text-decoration-line 设置文本修饰线类型 3 IE不支持
text-decoration-color 设置文本修饰线颜色 3 IE不支持
text-decoration-style 设置文本修饰线样式 3 IE不支持
text-decoration-thickness 设置文本修饰线粗细 3 IE不支持
text-underline-position 设置下划线的位置 3 IE不支持
text-combine-upright 组合字符（直排文字） 3 IE不支持

盒模型属性

属性 描述 CSS版本 兼容性
width 设置元素的宽度 1 所有浏览器
height 设置元素的高度 1 所有浏览器
min-width 设置元素的小宽度 2 IE7+
min-height 设置元素的小高度 2 IE7+
max-width 设置元素的较大宽度 2 IE7+
max-height 设置元素的较大高度 2 IE7+
margin 复合属性，设置所有外边距属性 1 所有浏览器
padding 复合属性，设置所有内边距属性 1 所有浏览器
box-sizing 设置盒模型计算方式 3 IE8+
box-shadow 设置元素阴影效果 3 IE9+
outline 设置元素轮廓 2 所有浏览器
outline-width 设置轮廓宽度 2 所有浏览器
outline-style 设置轮廓样式 2 所有浏览器
outline-color 设置轮廓颜色 2 所有浏览器
outline-offset 设置轮廓偏移量 3 IE不支持

定位与布局属性

属性 描述 CSS版本 兼容性
position 设置元素的定位方式 2 所有浏览器
top 设置定位元素的上外边距边界 2 所有浏览器
right 设置定位元素的右外边距边界 2 所有浏览器
bottom 设置定位元素的下外边距边界 2 所有浏览器
left 设置定位元素的左外边距边界 2 所有浏览器
float 设置元素浮动 1 所有浏览器
clear 清除浮动 1 所有浏览器
display 设置元素显示类型 1 所有浏览器
visibility 设置元素是否可见 2 所有浏览器
overflow 设置内容溢出时的处理方式 2 所有浏览器
overflow-x 设置水平方向溢出处理 3 IE9+
overflow-y 设置垂直方向溢出处理 3 IE9+
vertical-align 设置垂直对齐方式 1 所有浏览器
z-index 设置元素的堆叠顺序 2 所有浏览器
clip 剪裁绝对定位元素 2 所有浏览器
clip-path 使用裁剪方式创建元素显示区域 3 IE不支持

Flexbox 布局属性

属性 描述 CSS版本 兼容性
display: flex 将元素设置为弹性容器 3 IE11+
flex-direction 设置主轴方向 3 IE11+
flex-wrap 设置项目是否换行 3 IE11+
flex-flow flex-direction和flex-wrap的简写 3 IE11+
justify-content 设置主轴对齐方式 3 IE11+
align-items 设置交叉轴对齐方式 3 IE11+
align-content 设置多根轴线的对齐方式 3 IE11+
order 设置项目的排列顺序 3 IE11+
flex-grow 设置项目的放大比例 3 IE11+
flex-shrink 设置项目的缩小比例 3 IE11+
flex-basis 设置项目在分配空间之前的默认大小 3 IE11+
flex flex-grow, flex-shrink 和 flex-basis的简写 3 IE11+
align-self 允许单个项目有与其他项目不一样的对齐方式 3 IE11+

Grid 布局属性

属性 描述 CSS版本 兼容性
display: grid 将元素设置为网格容器 3 IE不支持
display: inline-grid 将元素设置为内联网格容器 3 IE不支持
grid-template-columns 定义列的大小和数量 3 IE不支持
grid-template-rows 定义行的大小和数量 3 IE不支持
grid-template-areas 使用命名项定义网格布局 3 IE不支持
grid-template 上述三个属性的简写形式 3 IE不支持
grid-column-gap 设置列之间的间隔 3 IE不支持
grid-row-gap 设置行之间的间隔 3 IE不支持
grid-gap 上述两个属性的简写形式 3 IE不支持
justify-items 设置单元格内容的水平位置 3 IE不支持
align-items 设置单元格内容的垂直位置 3 IE不支持
place-items 上述两个属性的简写形式 3 IE不支持
justify-content 设置整个内容区域在容器里面的水平位置 3 IE不支持
align-content 设置整个内容区域的垂直位置 3 IE不支持
place-content 上述两个属性的简写形式 3 IE不支持
grid-auto-columns 设置浏览器自动创建的多余网格的列宽 3 IE不支持
grid-auto-rows 设置浏览器自动创建的多余网格的行高 3 IE不支持
grid-auto-flow 设置自动放置算法的工作方式 3 IE不支持
grid-column-start 指定网格项目从哪一列开始 3 IE不支持
grid-column-end 指定网格项目到哪一列结束 3 IE不支持
grid-row-start 指定网格项目从哪一行开始 3 IE不支持
grid-row-end 指定网格项目到哪一行结束 3 IE不支持
grid-column grid-column-start和grid-column-end的简写 3 IE不支持
grid-row grid-row-start和grid-row-end的简写 3 IE不支持
grid-area 指定网格项目放在哪个区域 3 IE不支持

变换与动画属性

属性 描述 CSS版本 兼容性
transform 对元素进行2D或转换 3 IE10+
transform-origin 设置变换的原点 3 IE10+
transform-style 设置嵌套元素如何在空间中呈现 3 IE11+
perspective 设置元素的透视视图 3 IE10+
perspective-origin 设置元素的底部位置 3 IE10+
backface-visibility 定义元素背面是否可见 3 IE10+
transition 复合属性，设置过渡效果 3 IE10+
transition-property 设置过渡的CSS属性名称 3 IE10+
transition-duration 设置过渡效果花费的时间 3 IE10+
transition-timing-function 设置过渡效果的时间曲线 3 IE10+
transition-delay 设置过渡效果何时开始 3 IE10+
animation 复合属性，设置动画效果 3 IE10+
animation-name 设置@keyframes动画的名称 3 IE10+
animation-duration 设置动画完成一个周期所花费的时间 3 IE10+
animation-timing-function 设置动画的速度曲线 3 IE10+
animation-delay 设置动画何时开始 3 IE10+
animation-iteration-count 设置动画播放次数 3 IE10+
animation-direction 设置动画是否反向播放 3 IE10+
animation-fill-mode 设置动画不播放时的样式 3 IE10+
animation-play-state 设置动画是否正在运行或暂停 3 IE10+
@keyframes 创建动画序列 3 IE10+

多列布局属性

属性 描述 CSS版本 兼容性
columns 设置列宽和列数 3 IE10+
column-width 设置列宽 3 IE10+
column-count 设置列数 3 IE10+
column-gap 设置列间距 3 IE10+
column-rule 设置列间规则 3 IE10+
column-rule-width 设置列间规则宽度 3 IE10+
column-rule-style 设置列间规则样式 3 IE10+
column-rule-color 设置列间规则颜色 3 IE10+
column-span 设置元素横跨多少列 3 IE10+
column-fill 设置如何填充列 3 IE不支持

滤镜效果属性

属性 描述 CSS版本 兼容性
filter 定义元素的可视效果 3 IE13+
backdrop-filter 定义元素后方区域的可视效果 3 IE不支持
blur() 高斯模糊效果 3 IE13+
brightness() 调整亮度 3 IE13+
contrast() 调整对比度 3 IE13+
drop-shadow() 添加投影效果 3 IE13+
grayscale() 转换为灰度图像 3 IE13+
hue-rotate() 调整色相 3 IE13+
invert() 反色 3 IE13+
opacity() 调整透明度 3 IE13+
saturate() 调整饱和度 3 IE13+
sepia() 转换为深褐色 3 IE13+

其他重要属性

属性 描述 CSS版本 兼容性
cursor 设置鼠标指针样式 2 所有浏览器
opacity 设置元素透明度 3 IE9+
content 与:before和:after伪元素配合使用 2 所有浏览器
quotes 设置引用的引号类型 2 所有浏览器
counter-reset 创建或重置计数器 2 所有浏览器
counter-increment 递增计数器 2 所有浏览器
pointer-events 设置元素是否对指针事件做出反应 3 IE11+
user-select 设置用户能否选择文本 3 IE10+
resize 定义元素是否可调整大小 3 IE不支持
zoom 设置元素的缩放比例 专有属性 IE
calc() 执行计算以确定CSS属性值 3 IE9+
var() 使用CSS变量 3 IE不支持
:root 匹配文档根元素 3 IE9+
object-fit 指定替换元素的内容如何适应其容器 3 IE不支持
object-position 指定替换元素的内容在元素框内的对齐方式 3 IE不支持
hyphens 设置如何对单词进行换行连接 3 IE10+
will-change 提示浏览器元素可能的变化 3 IE不支持
scroll-behavior 设置滚动行为 3 IE不支持
caret-color 设置输入光标颜色 3 IE不支持
appearance 设置元素的外观样式 3 部分支持

打印相关属性

属性 描述 CSS版本 兼容性
page-break-before 设置元素前的分页行为 2 所有浏览器
page-break-after 设置元素后的分页行为 2 所有浏览器
page-break-inside 设置元素内的分页行为 2 所有浏览器
orphans 设置块容器底部必须保留的小行数 2 IE8+
widows 设置块容器顶部必须保留的小行数 2 IE8+

伪类和伪元素

选择器 描述 CSS版本 兼容性
:hover 选择鼠标指针悬停其上的元素 1 所有浏览器
:active 选择被激活的元素 1 所有浏览器
:focus 选择获得焦点的元素 2 所有浏览器
:focus-within 选择包含获得焦点元素的元素 3 IE不支持
:focus-visible 选择通过键盘操作获得焦点的元素 3 IE不支持
:first-child 选择属于其父元素的首个子元素 2 IE7+
:last-child 选择属于其父元素的一个子元素 3 IE9+
:nth-child(n) 选择属于其父元素的第n个子元素 3 IE9+
:nth-last-child(n) 选择属于其父元素的倒数第n个子元素 3 IE9+
:nth-of-type(n) 选择同类型中的第n个同级兄弟元素 3 IE9+
:nth-last-of-type(n) 选择同类型中的倒数第n个同级兄弟元素 3 IE9+
:first-of-type 选择同类型中的第一个同级兄弟元素 3 IE9+
:last-of-type 选择同类型中的一个同级兄弟元素 3 IE9+
:only-child 选择属于其父元素的唯一子元素 3 IE9+
:only-of-type 选择同类型中的唯一同级兄弟元素 3 IE9+
:empty 选择没有子元素的元素 3 IE9+
:not(selector) 选择非指定元素/选择器的每个元素 3 IE9+
:target 选择当前活动的目标元素 3 IE9+
:checked 选择被选中的输入元素 3 IE9+
:disabled 选择被禁用的输入元素 3 IE9+
:enabled 选择被启用的输入元素 3 IE9+
:required 选择必填的输入元素 3 IE10+
:optional 选择可选的输入元素 3 IE10+
:valid 选择验证通过的输入元素 3 IE10+
:invalid 选择验证失败的输入元素 3 IE10+
:in-range 选择值在指定范围内的输入元素 3 IE不支持
:out-of-range 选择值超出指定范围的输入元素 3 IE不支持
:read-only 选择只读的输入元素 3 IE不支持
:read-write 选择可读写的输入元素 3 IE不支持
::before 在被选元素的内容前面插入内容 2 所有浏览器
::after 在被选元素的内容后面插入内容 2 所有浏览器
::first-letter 选择元素的第一个字母 1 所有浏览器
::first-line 选择元素的第一行 1 所有浏览器
::selection 选择用户选择的元素部分 3 IE9+
::placeholder 选择表单元素的占位符文本 3 IE不支持
::marker 选择列表项的标记 3 IE不支持
::backdrop 选择全屏元素的后层 3 IE不支持

兼容性说明

  • 所有浏览器: 包括IE6+、Chrome、Firefox、Safari、Opera等主流浏览器

  • IE6+: Internet Explorer 6及更高版本

  • IE7+: Internet Explorer 7及更高版本

  • IE8+: Internet Explorer 8及更高版本

  • IE9+: Internet Explorer 9及更高版本

  • IE10+: Internet Explorer 10及更高版本

  • IE11+: Internet Explorer 11及更高版本

  • IE不支持: Internet Explorer 不支持

  • Edge: Microsoft Edge浏览器

  • 部分支持: 部分浏览器版本支持或需要前缀

使用建议

  1. 渐进增强: 先确保基本功能在所有浏览器中可用，再为现代浏览器添加高级特性

  2. 特性检测: 使用Modernizr等工具检测浏览器支持情况

  3. 回退方案: 为不支持某些CSS特性的浏览器提供替代方案

  4. 厂商前缀: 适当使用-webkit-, -moz-, -ms-, -o-等前缀确保兼容性

  5. 定期更新: CSS标准不断发展，建议定期关注MDN Web Docs等权威资源

本参考手册涵盖了CSS的所有核心属性，包括最新的CSS3特性，可作为日常开发的完整查询工具。随着Web标准的持续发展，新的CSS属性和特性会不断出现，建议开发者保持学习态度，及时掌握新技术动态。部分属性详解和用法示例代码号在逐步完善。

本文标签：
← CSS 基础总结 CSS border 边框 →

感谢您的认可和支持

微信支付二维码 - 长按识别

微信

支付宝二维码 - 长按识别

支付宝

持续输出优质内容需要动力，您的每一个打赏都是深夜码字时的温暖咖啡☕
分享笔记 （共有 篇笔记）
验证码：
微信公众号