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