1. CSS3 新增长度单位
- rem根元素字体大小的倍数，只与根元素字体大小有关。
- vw 视口宽度的百分之多少------10vw 就是视口宽度的10% 。
- vh 视口高度的百分之多少 ------10vh 就是视口高度的10% 。
- vmax 视口宽高中大的那个的百分之多少。（了解即可）
- vmin 视口宽高中小的那个的百分之多少。（了解即可）
2. CSS3 新增颜色设置方式
CSS3 新增了三种颜色设置方式，分别是：rgba 、hsl 、hsla
3. CSS3 新增选择器
CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、UI 伪类、结构伪类、否定伪类、伪元素。（前面的博客讲解过）
4. CSS3 新增盒模型相关属性
4.1. box-sizing 怪异盒模型
使用box-sizing属性可以设置盒模型的两种类型
| 可选值 | 含义 |
|---|---|
| content-box | width 和 height 设置的是盒子内容区的大小。（默认值） |
| border-box | width 和 height 设置的是盒子总大小。（怪异盒模型） |
4.2. resize 调整盒子大小
使用resize属性可以控制是否允许用户调节元素尺寸。
| 可选值 | 含义 |
|---|---|
| none | 不允许用户调整元素大小。 (默认) |
| both | 用户可以调节元素的宽度和高度。 |
| horizontal | 用户可以调节元素的宽度 。 |
| vertical | 用户可以调节元素的高度。 |
！！！注意：需要与overflow配合使用，且overflow不能为visible（默认值）
4.3. box-shadow 盒子阴影
使用 box-shadow 属性为盒子添加阴影。
- 语法：
box-shadow: h-shadow v-shadow blur spread color inset;
- 各个值的含义：
| 值 | 含义 |
|---|---|
| h-shadow | 水平阴影的位置，必须填写，可以为负值 |
| v-shadow | 垂直阴影的位置，必须填写，可以为负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的外延值 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
- 默认值：box-shadow:none表示没有阴影
- 示例：
- /* 写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;- /* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;- /* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;- /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;- /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;- /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;
4.4. opacity不透明度
- opacity属性能为整个元素添加透明效果， 值是 0到 1 之间的小数，0是完全透明，1表示完 全不透明。
- opacity与 rgba 的区别？
- opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
- r gba> 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
5. CSS3 新增背景属性
background-origin， background-clip，background-size ，多背景图