CSS新手入门笔记整理：CSS3属性表

属性

属性值

说明

text-shadow

• 数值

文本阴影

text-stroke

• 数值

文本描边

text-overflow

• ellipsis（文本溢出时，显示省略号，隐藏多余的文字）
• clip（文本溢出时，不显示省略号，裁切多余的文字）

文本溢出

word-wrap

• normal（自动换行）
• break-word（强制换行）

强制换行

word-break

• normal（自动换行）
• break-all（允许在单词内换行）
• keep-all（只能在半角空格或连字符处换行）

@font-face

• 字体

嵌入字体

属性

属性值

说明

opacity

• 0.0完全透明
• 1.0完全不透明

透明度

rgba(R, G, B,A)

RGBA颜色

oackground:linear-gradient(方向, 开始颜色, 结束颜色)

线性渐变

ackground:radial-gradient(位置，开始色，结束色)

径向渐变

属性

属性值

说明

border-radius

px/em /百分比

圆角效果

box-shadow

数值

边框阴影

border-colors

色值

多色边框

border-image

url（图片路径）

边框背景

属性

属性值

说明

background-size

数值

背景大小

background-origin

• border-box（从边框开始平铺）
• padding-box（从内边距开始平铺）
• content-box（从内容区开始平铺）

背景位置

background-clip

• border-box（从边框开始剪切）
• padding-box（从内边距开始剪切）
• content-box（从内容区开始剪切）

背景剪切

属性

属性值

说明

transform: translate()

数值

平移

transform: scale()

数值

缩放

transform: skew()

数值

倾斜

transform: rotate0

度数

旋转

transform-origin

数值

改变中心原点

属性

属性值

说明

transition-property

属性名称

对元素的哪一个属性进行操作

transition-duration

s

过渡的持续时间

transition-timing-function

速率曲线值

过渡的速率变化方式

transition-delay

s

过渡的延迟时间(可选参数)

transition

过渡属性 过渡时间 过渡方式 延迟时间

复合属性

属性

属性值

说明

animation-name

属性名称

对哪一个CSS属性进行操作

animation-duration

s

动画的持续时间

animation-timing-function

速率曲线值

动画的速率变化方式

animation-delay

s

动画的延迟时间

animation-iteration-count

数值

动画的播放次数

animation-direction

• normal（正方向）
• reverse（反方向）
• alternate（奇正偶反）

动画的播放方向，正向还是反向

animation-play-state

• running（播放）
• paused（暂停）

播放状态

animation

复合属性

属性

属性值

说明

column-count

数值

列数

column-width

数值

每一列的宽度

column-gap

数值

两列之间的距离

column-rule

宽度值 样式值 颜色值

分隔线样式

column-span

• none（不跨列）
• all（跨所有列）

定义跨列样式

属性

属性值

说明

flex-grow

数值

定义子元素的放大比例

flex-shrink

数值

定义子元素的缩小比例

flex-basis

数值

定义子元素的宽度

flex

数值

flex-grow、flex-shrink、flex-basis 的复合属性

flex-direction

row（横向排列）

row-reverse（横向反向排列）

column（纵向排列）

column-reverse（纵向反向排列）

定义子元素的排列方向

flex-wrap

nowrap（单行显示）

wrap（多行显示）

wrap-reverse（反向多行显示）

定义子元素是单行显示，还是多行显示

flex-flow

flex-direction、flex-wrap的复合属性

order

数值

定义子元素的排列顺序

justify-content

flex-start（左边）

center（中间）

flex-end（右边）

space-between（平均分布）

space-around（平均分布）

定义子元素在“横轴”上的对齐方式

align-items

flex-start（上边）

center（中间）

flex-end（下边）

baseline（基线）

stretch（适应父元素高度）

定义子元素在“纵轴”上的对齐方式

属性

属性值

说明

outline

宽度 样式 颜色

定义文本框的轮廓线样式

initial

CSS属性名称

重置CSS属性的取值

calc()函数

表达式

计算CSS属性的取值

overflow-X

visible（默认）

hidden（剪切内容，示y轴滚动条而）

scroll（显示所有滚动条）

auto（显示所有滚动条）

定义内容超出元素“宽度”时应该如何处理

overflow-y

visible（默认）

hidden（剪切内容，示x轴滚动条而）

scroll（显示所有滚动条）

auto（显示所有滚动条）

定义内容超出元素“高度”时应该如何处理

pointer-events

auto（否）

none（是）

是否禁用鼠标单击事件