CSS3-新增长度单位/颜色设置方式/选择器/盒子模型属性/背景

新增长度单位

1、rem根元素字体大小的倍数，只与根元素字体大小有关。
2、vw视口宽度的百分之多少，10vw就是视口宽度的10%。
3、vh视口高度的百分之多少。
4、vmax视口宽高中，大的那个的百分之多少。
4、vmin视口宽高中，小的那个的百分之多少。

新增颜色设置方式

CSS3新增了三种颜色设置方式见：https://www.jianshu.com/p/b9d6a13b0afa

新增选择器

CSS3新增的选择器有：动态伪类、目标伪类、语言伪类、UI伪类、结构伪类、否定伪类、伪元素等，详情见：https://www.jianshu.com/p/02f7c3849aaa

新增盒子模型属性

box-sizing怪异盒模型
使用box-sizing属性可以设置盒模型的两种类型

可选值	含义
content-box	width和height设置的是盒子内容区的大小（默认值）
border-box	width和height设置的是盒子总大小，包含content、border和padding。（怪异盒模型）

resize调整盒子大小(了解)
使用resize属性可以控制是否允许用户调节元素尺寸。需配合overflow使用，否则无效。

可选值	含义
none	不允许用户调整元素大小（默认值）
both	用户可以调节元素的宽度和高度
horizontal	用户可以调节元素的宽度
vertical	用户可以调节元素的高度

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;表示没有阴影

opacity不透明度
opacity属性能为整个元素添加透明效果，值是0到1之间的小数，0是完全透明，1表示完全不透明。

opacity与rgb的区别？
opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgb是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

新增背景属性

background-origin
作用：设置背景图的原点：
padding-box：从padding区域开始显示背景图像（默认值）
border-box：从border区域开始显示背景图像
content-box：从content区域开始显示背景图像

background-origin: border-box;

background-clip
作用：设置背景图的向外裁剪的区域。
border-box：从border区域开始向外裁剪背景（默认值）
padding-box：从padding区域开始向外裁剪背景
content-box：从content区域开始向外裁剪背景
text：背景图只呈现在文字上

background-size
作用：设置背景图的尺寸。
1、用长度值指定背景图大小，不允许负值。

background-size: 300px 200px;

2、用百分比指定背景图大小，不允许负值。

background-size: 100% 100%;

3、auto：背景图片的真实大小(默认值)。
4、contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但是注意：可能会造成容器部分区域没有背景图片。

background-size: contain;

5、cover：将背景图片等比例缩放，直到完全覆盖容器，图片会尽可能的显示在元素上，但要注意：背景图片有可能显示不完整。----相对比较好的选择

background-size: cover;

background复合属性

/*color url repeat position / size origin clip*/
background: skyblue url("c4bc7b64-c68b-49c9-9ee6-59516addcf74.jpg") no-repeat 0px 0px /300px 400px border-box content-box;

注意：
1、origin和clip值如果一样，如果只写一个值，则origin和clip都设置；如果设置了两个值，前面的是origin，后面的是clip。
2、size的值必须写在position值的后面，并且用/分开。

多背景图
CSS3允许元素设置多张背景图片，且用,隔开。

background: url(./bg-lt.png) no-repeat,
            url(./bg-rt.png) no-repeat right top,
            url(./bg-lb.png) no-repeat left bottom,
            url(./bg-rb.png) no-repeat right bottom;