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 | 指定表格单元格、行和列的算法规则 |