CSS 属性汇总


边框属性

属性 说明
background 设置所有背景值的简写属性
background-attachment 设置元素的背景附着属性,决定背景图片是否随页面一起滚动
background-clip 设置元素背景颜色和图像的裁剪区域
background-color 设置背景颜色
background-image 设置元素背景图像
background-origin 设置背景图像绘制的起始位置
background-position 设置背景图像在元素盒子中的位置
background-repeat 设置背景图像的重复方式
background-size 设置背景图像的绘制尺寸

背景属性

属性 说明
border 为所有边界设置所有边框宽度的简写属性
border-bottom 为所有下边框设置宽度的简写属性
border-bottom-color 为所有下边框设置颜色
border-bottom-left-radius 将边框左下角设置为圆角
border-bottom-right-radius 将边框右下角设置为圆角
border-bottom-style 设置元素下边框的样式
border-bottom-width 设置元素下边框的宽度
border-color 设置四条边框的颜色
border-image 使用图像作为边框的简写属性
border-image-outset 指定图像向边框盒外部扩展的区域
border-image-repeat 指定边框图像的缩放和重复方式
border-image-slice 指定边框图像的切割方式
border-image-source 设置边框图像的来源路径
border-image-width 设置边框图像的宽度
border-left 设置元素左边框的简写属性
border-left-color 设置左边框的颜色
border-left-style 设置左边框的样式
border-left-width 设置左边框的宽度
border-radius 指定圆角边框的简写属性
border-right 设置元素右边框的简写属性
border-right-color 设置右边框的颜色
border-right-style 设置右边框的样式
border-right-width 设置右边框的宽度
border-style 设置所有边框样式的简写属性
border-top 设置上边框的简写属性
border-top-color 设置上边框的颜色
border-top-left-radius 将边框左上角设置为圆角
border-top-right-radius 将边框右上角设置为圆角
border-top-style 设置上边框的样式
border-top-width 设置上边框的宽度
border-width 设置四个边框的宽度
box-shadow 设置元素的一个或者多个阴影效果
outline-color 设置元素边框外围轮廓线的颜色
outline-offset 设置轮廓距离元素边框边缘的偏移量
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
outline 在一条声明中设置轮廓的简写属性

盒模型属性

属性 说明
box-sizing 设置要应用盒子尺寸相关属性的元素
clear 设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素
display 设置元素盒子的类型
float 将元素移动到其包含块的左边界或者右边界,或者另一个浮动元素的边界
height 设置元素盒子的高度
margin 设置元素盒子四个外边距宽度的简写属性
margin-bottom 设置盒子下外边距的宽度
margin-left 设置盒子左外边距的宽度
margin-right 设置盒子右外边距的宽度
margin-top 设置盒子上外边距的宽度
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度
overflow 设置内容横向和竖向溢出盒子时处理方式的简写属性
overflow-x 设置内容横向溢出盒子时的处理方式
overflow-y 设置内容竖向溢出盒子时的处理方式
padding 设置元素盒子四个内边距宽度的简写属性
padding-bottom 设置盒子下内边距的宽度
padding-left 设置盒子左内边距的宽度
padding-right 设置盒子右内边距的宽度
padding-top 设置盒子上内边距的宽度
visibility 设置元素的可见性
width 设置元素的宽度

布局属性

属性 说明
bottom 设置元素下外边距边界与包含块下边界之间的偏移
column-count 指定多列布局的列数
column-fill 多列布局中列与列之间的内容如何分布
column-gap 指定多列布局中列与列之间的间隔
column-rule 多列布局中定义列与列之间的规则的简写属性
column-rule-color 设置多列布局中的颜色规则
column-rule-style 设置多列布局中的样式规则
column-rule-width 设置多列布局中的宽度规则
columns 在多列布局中设置列数和列宽度的简写属性
column-span 指定多列布局中元素能跨多少列
column-width 指定多列布局中列的宽度
display 指定元素在页面上的显示方式
position 设置元素的定位方法
right 设置元素右外边距边界与包含块右边界之间的偏移
left 设置元素左外边距边界与包含块左边界之间的偏移
top 设置元素上外边距边界与包含块上边界之间的偏移
z-index 设置定位元素的堆叠顺序

文本属性

属性 说明
@font-face 指定网页使用的字体
direction 指定文本方向
font 在一条声明中设置文本字体、大小和颜色的简写属性
font-family 指定文本所用的字体系列,排在前面的优先使用
font-size 指定字体大小
font-style 指定采用正常字体、斜体还是倾斜字体
font-variant 指定字体是否以小型大写字母显示
font-weight 设置文本粗细
letter-spacing 设置字母间距
line-height 设置行高
text-align 设置文本对齐方式
text-decoration 规定添加到文本的修饰(如下划线)
text-indent 规定文本块中首行文本的缩进
text-justify 设置文本对齐方式
text-shadow 指定文本块的阴影效果
text-transform 控制文本块字母大小写
word-spacing 指定单词间距

过渡、动画和变换属性

属性 说明
@keyframes 为动画指定一个以上的关键帧
animation 设置动画的简写属性
animation-delay 指定动画开始前的延迟时间
animation-direction 指定动画重复播放时的播放方向
animation-duration 指定动画持续时间
animation-iteration-count 指定动画的循环次数
animation-name 指定用于动画的关键帧集合的名称
animation-play-state 指定动画状态(播放或暂停)
animation-timing-function 指定关键帧之间计算属性值的函数
transform 指定应用于元素的变换
transform-origin 指定元素变换的起点
transition 指定CSS属性过渡效果的简写属性
transition-delay 指定触发过渡的延迟时间
transition-duration 指定过渡的持续时间
transition-property 指定带有过渡效果的属性
transition-timing-function 指定过渡期间计算中间属性值的函数

其他属性

属性 说明
border-collapse 指定表格相邻单元格的边框的显示样式
border-spacing 指定相邻单元格的边框的距离
caption-side 指定表格标题的位置
color 设置元素的前景色
cursor 指定光标的形状
empty-cells 指定是否显示表格中的空单元格
list-style 设置列表样式的简写属性
list-style-image 指定列表项标记使用的图像
list-style-position 指定列表项标记相对于列表项内容的位置
list-style-type 指定列表项标记的类型
opacity 设置元素的透明度
table-layout 指定表格单元格、行和列的算法规则