CSS 基础教程
CSS 盒子模型
CSS 高级教程
CSS3 特点
CSS3 示例
CSS3 参考

CSS3 属性

以下部分包含 CSS3 属性列表以及简要说明。

CSS 属性按类别排序

以下部分包含属于最新 CSS3 规范的标准属性的完整列表。 所有属性都按字母顺序列出。

属性 说明
align-content 指定弹性容器的项目在弹性容器内的对齐方式。
align-items 指定 flex 容器中项目的默认对齐方式。
align-self 指定 flex 容器中选定项目的对齐方式。
animation 指定基于关键帧的动画。
animation-delay 指定动画何时开始。
animation-direction 指定动画是否应在交替循环中反向播放。
animation-duration 指定动画完成一个周期所需的秒数或毫秒数。
animation-fill-mode 指定 CSS 动画在执行前后应如何将样式应用于其目标。
animation-iteration-count 指定动画循环在停止之前应播放的次数。
animation-name 指定应应用于所选元素的 @keyframes 定义的动画的名称。
animation-play-state 指定动画是正在运行还是暂停。
animation-timing-function 指定 CSS 动画在每个循环期间应如何进行。
backface-visibility 指定当面向用户时变换元素的“背面”是否可见。
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-collapse 指定表格单元格边框是连接还是分开。
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-spacing 设置相邻表格单元格边框之间的间距。
border-style 设置元素所有四个边的边框样式。
border-top 设置元素上边框的宽度、样式和颜色。
border-top-color 设置元素上边框的颜色。
border-top-left-radius 定义元素左上角边框的形状。
border-top-right-radius 定义元素右上角边框的形状。
border-top-style 设置元素上边框的样式。
border-top-width 设置元素上边框的宽度。
border-width 设置元素所有四个边的边框宽度。
bottom 指定定位元素下边缘的位置。
box-shadow 将一个或多个阴影应用到元素的框。
box-sizing 更改默认 CSS 框模型。
caption-side 指定表格标题的位置。
clear 指定元素相对于浮动元素的位置。
clip 定义剪辑区域。
color 指定元素文本的颜色。
column-count 指定多列元素中的列数。
column-fill 指定如何填充列。
column-gap 指定多列元素中的列之间的间距。
column-rule 指定要在多列元素中的每列之间绘制的直线或“规则”。
column-rule-color 指定在多列布局中的列之间绘制的规则的颜色。
column-rule-style 指定在多列布局中的列之间绘制的规则样式。
column-rule-width 指定在多列布局中的列之间绘制的规则的宽度。
column-span 指定一个元素在多列布局中跨越多少列。
column-width 指定多列元素中列的最佳宽度。
columns 用于设置 column-widthcolumn-count 属性的简写属性。
content 插入生成的内容。
counter-increment 增加一个或多个计数器值。
counter-reset 创建或重置一个或多个计数器。
cursor 指定光标的类型。
direction 定义文字方向/书写方向。
display 指定元素在屏幕上的显示方式。
empty-cells 显示或隐藏空表格单元格的边框和背景。
flex 指定灵活长度的组件。
flex-basis 指定弹性项目的初始主尺寸。
flex-direction 指定灵活项的方向。
flex-flow flex-directionflex-wrap 属性的简写属性。
flex-grow 指定弹性项目将如何相对于弹性容器内的其他项目增长。
flex-shrink 指定 flex 项相对于 flex 容器内的其他项如何收缩。
flex-wrap 指定弹性项目是否应该换行。
float 指定一个盒子是否应该浮动。
font 在一个声明中定义多种字体属性。
font-family 定义元素的字体列表。
font-size 定义文本的字体大小。
font-size-adjust 在发生字体回退时保持文本的可读性。
font-stretch 从字体中选择正常、压缩或扩展的面。
font-style 定义文本的字体样式。
font-variant 指定字体变体。
font-weight 指定文本的字体粗细。
height 指定元素的高度。
justify-content 指定在解决任何灵活长度和自动边距后,flex 项目如何沿 flex 容器的主轴对齐。
left 指定定位元素左边缘的位置。
letter-spacing 设置字母之间的额外间距。
line-height 设置文本行之间的高度。
list-style 定义列表和列表元素的显示样式。
list-style-image 指定要用作列表项标记的图像。
list-style-position 指定列表项标记的位置。
list-style-type 指定列表项的标记样式。
margin 设置元素所有四个边的边距。
margin-bottom 设置元素的下边距。
margin-left 设置元素的左边距。
margin-right 设置元素的右边距。
margin-top 设置元素的上边距。
max-height 指定元素的最大高度。
max-width 指定元素的最大宽度。
min-height 指定元素的最小高度。
min-width 指定元素的最小宽度。
opacity 指定元素的透明度。
order 指定弹性项目在弹性容器中的显示和布局顺序。
outline 设置元素轮廓的所有四个边的宽度、样式和颜色。
outline-color 设置轮廓的颜色。
outline-offset 设置轮廓和元素边框边缘之间的空间。
outline-style 设置轮廓样式。
outline-width 设置轮廓的宽度。
overflow 指定溢出元素框的内容的处理方式。
overflow-x 指定对水平溢出元素框的内容的处理。
overflow-y 指定对垂直溢出元素框的内容的处理。
padding 在元素的所有四个边上设置填充。
padding-bottom 将填充设置为元素的底部。
padding-left 将填充设置到元素的左侧。
padding-right 设置元素右侧的内边距。
padding-top 将填充设置为元素的顶部。
page-break-after 在元素后插入分页符。
page-break-before 在元素前插入分页符。
page-break-inside 在元素内插入分页符。
perspective 定义查看对象所有子元素的视角。
perspective-origin 定义透视属性的原点(3D 空间的消失点)。
position 指定元素的定位方式。
quotes 为嵌入的引用指定引号。
resize 指定用户是否可以调整元素的大小。
right 指定定位元素右边缘的位置。
tab-size 指定制表符的长度。
table-layout 指定表格布局算法。
text-align 设置内联内容的水平对齐方式。
text-align-last 指定当 text-alignjustify 时块的最后一行或强制换行之前的一行如何对齐。
text-decoration 指定添加到文本的装饰。
text-decoration-color 指定 text-decoration-line 的颜色。
text-decoration-line 指定向元素添加什么样的线条装饰。
text-decoration-style 指定由 text-decoration-line 属性指定的线条样式
text-indent 缩进第一行文本。
text-justify 指定当 text-align 属性设置为 justify 时要使用的对齐方法。
text-overflow 指定文本内容溢出块容器时如何显示。
text-shadow 对元素的文本内容应用一个或多个阴影。
text-transform 转换文本的大小写。
top 指定定位元素上边缘的位置。
transform 对元素应用 2D 或 3D 变换。
transform-origin 定义元素的变换起点。
transform-style 指定嵌套元素如何在 3D 空间中呈现。
transition 定义元素的两种状态之间的转换。
transition-delay 指定过渡效果何时开始。
transition-duration 指定完成过渡效果所需的秒数或毫秒数。
transition-property 指定应应用过渡效果的 CSS 属性的名称。
transition-timing-function 指定过渡效果的速度曲线。
vertical-align 设置元素相对于当前文本基线的垂直定位。
visibility 指定元素是否可见。
white-space 指定如何处理元素内的空白。
width 指定元素的宽度。
word-break 指定如何在单词中换行。
word-spacing 设置单词之间的间距。
word-wrap 指定内容溢出其容器边界时是否分词。
z-index 指定定位元素的分层或堆叠顺序。
Advertisements