1.1 复习
1.1.1 CSS3伪元素复习
- ::before 原有内容之前插入
- ::after 原有内容之后插入
- content 必须书写不能省略
- ::first-letter: 首字母（设置文字属性）
1.1.2 圆角
border-radius
1.1.3 阴影
- 盒子阴影： box-shadow:(inset) 右偏移量 下偏移量 模糊半径 延伸量 颜色；
- 文字阴影： text-shadow: 右偏移量 下偏移量 模糊半径 颜色；
1.1.4 背景
- background-origin: 背景起源（content-box）
- background-clip:背景裁切（content-box）
- background-size:背景图宽度 背景图高度（等比例）
-
- cover(覆盖) contain(容纳)
- background-images:-webkit-linear-gradient(top:渐变开始方向,渐变颜色 百分数)
- 多背景：一个元素可以添加多个背景色，用逗号隔开
2.1过渡
[元素过渡到:hover状态]
[将开始状态到结束状态的中间过程也表现出来]
2.1.1 属性
transition:all
2.1.2 参数
- 第一个：参与过渡的属性（一般为all）
- 第二个：完成时间，单位:s
- 第三个：缓冲描述（linear匀速，ease变速，贝赛尔曲线）
- 第四个：延迟时间，单位：s，没有延迟是：0s
2.1.3可以拆分为4个小属性
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
2.1.4 参与过渡的属性
- 数值型
- background-position
- background-color
3.1 变形
3.2.1 属性
- transform
旋转：rotate()
单位：deg
正方向：顺时针
3.2.2 放缩
- transform:scale(数字)
0-1:缩小； 1-无穷：放大
3.2.3 斜切
- transform:skew(水平斜切，垂直斜切)
**注：**同一个元素可以有多个变形，用空格隔开。元素没有变形：none
3.2.4 2D空间移动
- 空间移动：
- translateX（）：水平方向移动，相对于自身位置移动
- translateY（）：垂直方向移动，单位px
绝对定位元素的水平居中
- left:50%; margin-left:-自身宽度/2;
- left:50%;transform:tranlateX(-50%);
