1，CSS3新特性
- 圆角（border-radius）
- 阴影（box-shadow）
- 对文字加特效（text-shadow）
- 线性渐变（gradient）
- 变换（transform）：rotate，scale，translate，skew//旋转，缩放，定位，倾斜
- 更多的CSS选择器：多背景设置，色彩模式如RGBA，伪元素::selection，媒体查询，多栏布局，图片边框
2，CSS3新增的伪类有哪些
| p:first-of-type | 其父元素首个p元素的每个p元素 |
| p:last-of-type | 其父元素的最后一个p的每个p元素 |
| p:only-of-type | 其父元素唯一一个p的每个元素 |
| p:nth-child(2) | 其父元素的第2个资源色的每个P元素 |
| p:only-child | 其父元素唯一一个子元素的每个p元素 |
| :enable:disable | 表单控件的禁用状态 |
| :checked | 单选框或复选框被选中 |
3，box-sizing属性
控制元素盒模型的解析模式
默认值：content-box，让元素维持W3C标准盒模型，元素的宽度和高度使用border+padding+content的宽度决定，设置height、width指的是content部分的高度和宽度；
而border-box让元素维持传统IE盒模型，height和width指的是border+padding+content的宽度和高度；
标准浏览器下，利用w3c规范解析盒模型，一旦修改元素边框和内距就会影响元素的盒子大小，就不得不重新计算，从而影响页面的布局；
4，CSS3动画的优点和缺点
优点：在性能上好一点，浏览器对CSS3的动画做一些优化；
代码相对简单；
缺点：动画控制上不够灵活，兼容性不好，部分动画功能无法实现
5，animation和transition异同
功能相同，都是通过改变元素的属性值来实现动画效果；
区别在于transition只能指定属性的开始值和结束值，在两个属性间使用平滑过渡的方式实现动画效果；而animation通过定义多个关键帧，以及定义每个关键帧中的元素属性，实现更为复杂的动画效果；
animation属性值有：
必要属性2个：
animation-name、animation-duration
其他属性：animation-play-state，播放状态
animation-timing-function，动画运动形式
animation-delay，动画延迟时间
animation-iteration-count,动画重复次数
animation-direction，播放前重置
6，媒体查询
@media 媒体类型 + 媒体特性{样式规则}
这通常在移动端使用，适用多屏幕，使用rem单位，根据屏幕尺寸动态地改变根节点HTML的font-size。
缺点是适配的屏幕尺寸不连续，会在CSS加入大量查询代码增加CSS大小。改进方法：使用JS获取设备屏幕宽度，根据设计稿原型尺码，动态的计算font-size的值。
px和em都是长度单位，但是px的大小是固定的，计算比较容易，而em的值是相对于容器字体的大小，并且继承父元素字体大小。
浏览器默认字体16px,一般1em=16px;
rem是相对于根元素通常是HTML元素的大小。
7，CSS3文本阴影
text-shadow{水平阴影，垂直阴影，模糊距离，阴影颜色}
盒阴影比其多了一个外延值，inset
8，如何把元素从左侧移动50px,从顶端移动100px--translate
h1{
text-shadow: 10px 2px 2px pink;
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);
-webkit-transform:translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
}注意考虑浏览器兼容性，从上到下分别是IE9-ms,Safari和Chrome的webkit，opera的-o-，Firefox的-moz
9, 如何把一个元素旋转30度--rotate 30deg//matrix
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
关于transform的一些属性可以看看
10，淡入淡出动画效果
定义动画关键帧，然后在元素CSS中animation-name=该关键帧名称
11，为盒子添加蒙版
-mask：mask-image，mask-position，mask-repeat
即url(), 50%, 50%, 1
12，背景颜色线性渐变
background：-webkit-linear-gradient（left，red，green 50%，blue）
13，设置CSS3倒影
background：-webkit-box-reflect：方向（below，above，left，right），距离
14，transition
简写属性，用于设置以下4个过渡 属性：
transition-property：哪个属性
transition-duration：过渡时间
transition-timing-function：速度效果的运动曲线=linear，ease，ease-in，ease-out，ease-in-out，cube-bezier
transition-delay：过渡开始前的延迟时间
15，background-clip和background-origin
clip规定背景（背景颜色加图片）的绘制区域，三个属性：
border-box：从边框开始绘制
padding-box:从边框内部开始绘制
content-box：从内容部分开始绘制
16，把文本分隔成4列，并使两列之间间隔30px
column-count:3
column-gap:30px
17,如何用省略号显示超文本内容
text-overflow：ellopsis；
18，文本换行
word-wrap
normal，只允许在断点字换行
break-word，在长单词或者URL地址内部进行换行