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（从内容区开始剪切）	背景剪切

CSS3变形

属性	属性值	说明
transform: translate()	数值	平移
transform: scale()	数值	缩放
transform: skew()	数值	倾斜
transform: rotate0	度数	旋转
transform-origin	数值	改变中心原点

CSS3过度

属性	属性值	说明
transition-property	属性名称	对元素的哪一个属性进行操作
transition-duration	s	过渡的持续时间
transition-timing-function	速率曲线值	过渡的速率变化方式
transition-delay	s	过渡的延迟时间(可选参数)
transition	过渡属性 过渡时间 过渡方式 延迟时间	复合属性

CSS3动画

属性	属性值	说明
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（是）	是否禁用鼠标单击事件

---