CSS3新增长度单位
rem根元素字体大小的倍数，只与根元素字体大小有关
vw视口宽度的百分之多少
vh视口高度的百分之多少
vmax视口宽高中大的哪个的百分之多少
vmin视口宽高中小的哪个的百分之多少
CSS3新增颜色设置方式
rgba、hsl、hsla
CSS3新增选择器
动态伪类、目标伪类、语言伪类、UI伪类、结构伪类、否定伪类、伪元素
CSS3新增盒子模型相关属性
box-sizing怪异盒模型
可选值
content-box width和height设置的是盒子内容去大小（默认值）
border-box width和height设置的是盒子总大小（怪异盒模型）
resize调整盒子大小
可选值 需要和overflow配合
none 不允许调整（默认）
both 用户可以调整宽高
horizontal 用户可以调整宽
vertircal 用户可以调整高
box-shadow盒子阴影
box-shaow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置，必须写
v-shadow 垂直阴影的位置，必须写
blur 模糊距离，可选
spread 外延值，可选
color 颜色，可选
inset 将外部阴影改成内部阴影
opacity 不透明度
为整个元素添加不透明度，值是0-1之间的小数，0是完全透明，1是完全不透明
CSS3新增背景相关属性
background-origin设置背景图从那开始铺
值：padding-box，从padding区域（左上角）开始显示背景图像，默认值
border-box，从border区域（左上角）开始显示背景图像
content-box，从content区域（左上角）开始显示背景图像
background-clip设置背景图的向外裁剪区域
值：border-box，从border区域开始向外裁剪背景，默认
padding-box，从padding区域开始向外裁剪背景
content-box，从content区域开始向外裁剪背景
text，背景图只呈现在文字上，需要和color: transparent一起使用，需要加前缀
background-size 设置背景图的尺寸
值：像素值
百分比
auto 背景图片真实大小，左上角对齐，显示在容器中
contain 背景图片等比例缩放，使背景图片的宽或高（大的）与容器宽或高相等，再将完整背景放在容器内，可能导致容器部分区域没有背景图片
cover 背景图片等比例缩放，使背景图片的宽或高（小的）与容器的宽或高相等，图片会尽可能显示在容器上，背景图片可能显示不完整
background 复合属性
background: color url repeat position /size origin clip（这俩顺序不能变 其他可以）
CSS3边框相关属性
边框圆角
边框外轮廓 了解
outline 不占位 不参与盒子计算
新增文本属性
text-shadow 文本阴影
text-shadow：h-shadow（必须写） v-shadow（必须写） blur color;
white-space 文本换行
white-space：normal/pre/pre-wrap(在pre基础上，超出元素边界自动换行)/pre-line(pre-wrap基础上，只识别换行，空格会忽略)/nowrap（强制不换行）
text-overflow 文本溢出 需要和overflow:hidden white-space:nowrap配合使用
text-flow:clip（当内联内容溢出时，将溢出部分裁切掉 默认）/ ellipsis（当内联内容溢出时，将溢出部分替换为...）
-web-kit-text-stroke文本描边
CSS3新增渐变
线性渐变 background-image:linear-gradient()
background-image:linear-gradient(red,yellow,green)默认从上到下渐变
background-image:linear-gradient(to right, red,yellow,green)使用关键词设置线性渐变方向
background-image:linear-gradient(20deg,red,yellow,green)使用角度设置线性渐变方向
background-image:linear-gradient(red 50px,yellow 100px,green 150px)调整开始渐变的位置，0-50px是纯红，50-100px渐变，100px纯黄，100-150px渐变，150px和150之后纯绿
径向渐变 background-image:radial-ggradient()
background-image:radial-ggradient(red,yellow,green)，默认从圆心四散，不一定是正圆
background-image:radial-ggradient(at right top,red,yellow,green) 使用关键词改变渐变圆圆心位置
background-image:radial-ggradient(at 100px 50px, red,yellow,green) 使用像素值改变渐变圆圆心位置
background-image:radial-ggradient(circle, red,yellow,green)使用关键词将渐变圆改为正圆
background-image:radial-ggradient(100px 50px, red,yellow,green) 调整形状半径
background-image:radial-ggradient( red 50px,yellow 100px,green 150px)调整开始渐变的位置
