1.  新增表单类型:
 email(电子邮件地址输入框)

代码示例:   <input type=“email” />   输入内容中必须包含@，并且@后需要有内容

url(网址输入框)
代码示例: <input type="url" />   输入的网址要加上协议前缀；如http://、https:// 等

number(数值输入框)
代码示例: <input type="number" value="11.5" />   只能输入数值相关字符，如数字、.(小数点)、-(负号)等。

range(滑动条)
代码示例: <input type=“range” /> 默认区间是0~100，可以通过max min 属性设定滑动范围

date（日期控件）
代码示例: <input type=“date” value=“2018-04-21”  /> value {string} ：设置或获取日期控件的值，值的格式要为："yyyy-MM-dd"。

month（年月控件）
代码示例: <input type=“month” value=“2018-04” /> value {string} ：设置或获取控件的值，值的格式要为："yyyy-MM"。

week(周数控件)
代码示例: <input type=“week” value=“2018-W04” /> value {string} ：设置或获取周数控件的值，值的格式要为："yyyy-Www"。(格式中的W字符不能省略，并且ww周数要为2位数)

time(时间控件)
代码示例: <input type="time" value="12:30" /> value {string} ：设置或获取时间控件的值，值的格式要为："HH:mm",、"HH:mm:ss" 或 "HH:mm:ss.SSS"。

datetime(时间日期控件)
代码示例: <input type=“datetime-local” value=“2018-04-21T15:30:29”/> value {string} ：设置或获取时间控件的值，值的格式要为：YYYY-MM-DDTHH:mm:ss(格式中的T字符不能省略)

search(搜索框)
代码示例: <input type=“search” />

color(颜色控件)
代码示例: <input type=“color” value=“#D00000”/> value {string} ：设置或获取颜色控件的值，值的格式要为："#rrggbb"。

2.  新增表单属性
novalidate  规定当提交表单时不对其进行验证。
适用标签:      novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color

autocomplete  规定输入字段是否应该启用自动完成功能。
值：     on ：默认。规定启用自动完成功能。     off ：规定禁用自动完成功能。
适用标签:     autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color  

autofocus  属性规定当页面加载时 ,input 元素应该自动获得焦点。

form override attributes    允许重写 form 元素的某些属性设定
适用类型： 表单重写属性适用于以下类型的 <input> 标签：submit 和 image
formaction    重写表单的 action 属性
formenctype    重写表单的 enctype 属性
formmethod    重写表单的 method 属性
formnovalidate    重写表单的 novalidate 属性
formtarget    重写表单的 target 属性

height/width   规定 <input> 元素的宽度和高度。
适用类型:     只适用于 <input type=“image”> 当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化

list     list 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
示例：     <input list=“datalist_id”>     规定绑定到 <input> 元素的 datalist 的 id

min/max    max 属性规定 <input> 元素的最大值。 min 属性规定 <input> 元素的最小值。 min 属性与 max 属性配合使用，可创建合法值范围。
适用标签:      max 和 min 属性适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week。

step   step 属性规定 <input> 元素的合法数字间隔。
适用标签:      step 属性适用于下面的 input 类型：number、range、date、datetime、datetime-local、month、time 和 week。

multiple   multiple 属性规定输入字段可选择多个值。
适用标签:      multiple 属性适用于以下 input 类型：email 和 file
注： email 输入多个值时，需要用逗号隔开

pattern (regexp)   pattern 属性规定用于验证 <input> 元素的值的正则表达式。
适用标签:     pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password

placeholder   placeholder 属性提供可描述输入字段预期值的提示信息
适用标签:     placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password

required    required 属性规定必需在提交之前填写输入字段。
适用标签:      required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

3.新增样式
rgba(颜色) RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 – 它规定了对象的不透明度,且透明不不会影响子标签
语法：      rgba(red, green, blue, alpha)。
     alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字

text-shadow(文字阴影)    text-shadow 可向文本应用阴影，规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
语法：      text-shadow: h-shadow v-shadow blur color;
     h-shadow：必需。水平阴影的位置。允许负值。      v-shadow：必需。垂直阴影的位置。允许负值。      blur  ：可选。模糊的距离。      color：可选。阴影的颜色    
text-shadow: 5px 5px 10px pink, 0 0 15px deeppink,0 0 20px lightcora;

text-stroke(文字描边） 设置或检索对象中的文字的描边。
语法：      text-stroke： text-stroke-width   text-stroke-color 
     text-stroke-width 设置或检索对象中的文字的描边厚度      text-stroke-color 设置或检索对象中的文字的描边颜色

direction    属性规定文本的方向 / 书写方向
语法：      direction:rtl/ltr      ltr:默认。文本方向从左到右。      rtl:文本方向从右到左   

border-radius(圆角)   为元素添加圆角边框

box-shadow（边框阴影）  box-shadow 属性向框添加一个或多个阴影
语法：     box-shadow: h-shadow v-shadow blur spread color inset;
    h-shadow：必需。水平阴影的位置。允许负值。     v-shadow：必需。垂直阴影的位置。允许负值。     spread：可选。阴影的尺寸。         blur ：可选。模糊的距离。         color：可选。阴影的颜色     inset：可选。将外部阴影 (outset) 改为内部阴影。   

border-image（图片）  box-image 属性向框添加图片
语法：     border-image: source slice width outset repeat;
    source:用于指定要用于绘制边框的图像的位置     slice ：图像边界向内偏移     width：图像边界的宽度         outset:边框图像区域超出边框的量。    repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。            

4.  为什么使用 font-face ？
    在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。     通过 CSS3，web 设计师可以使用他们喜欢的任意字体。 当找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。     “自己的”的字体是在 CSS3 @font-face 规则中定义的。

浏览器支持情况:      Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。     Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

使用：步骤一：将字体文件存放到工程目录中     步骤二： 在新的 @font-face 规则中，您必须首先定义字体的名称（比如     myFirstFont），然后指向该字体文件  如需为 HTML 元素使用字体，请通过 font-family 属性来    引用字体的名称 (myFirstFont)：

5.  background(背景)
background-size(背景图像的尺寸)    规定背景图像的尺寸
语法：     background-size: length|percentage|cover|contain;
length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。
示例: background-size: 100px 100px;
percentage：以父元素的百分比来设置背景图像的宽度和高度。  第一个值设置宽度，第二个值设置高度。 示例: background-size: 50% 100%;
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 示例: background-size: cover;
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 示例: background-size: contain;     

background-origin     规定 background-position 属性相对于什么位置来定位
语法：     background-origin: padding-box|border-box|content-box;
padding-box：背景图像相对于内边距框来定位。border-box   ：背景图像相对于边框盒来定位。content-box  : 背景图像相对于内容框来定位。

6.    mask(图片蒙版)
background : url("images/logo.png") no-repeat;   -webkit-mask : url("images/mask.png");

background : url("images/logo.png") no-repeat;  -webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

7.  box-reflect(倒影)
box-reflect(倒影)   设置或检索对象倒影。
语法：     box-reflect：none | <direction> <offset>? <mask-box-image>?
none    无倒影
direction    above：指定倒影在对象的上边
below：指定倒影在对象的下边z
left：指定倒影在对象的左边
right：指定倒影在对象的右边
offset（可选）    <length>：用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值
<mask-box-image>    none：无遮罩图像
<url>：使用绝对或相对地址指定遮罩图像
<linear-gradient>：使用线性渐变创建遮罩图像。
<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
总结：倒影是设置或检索对象倒影。 如果给块标签设置倒影 使用浮动或者inline-block；倒影不占文本流

8.   filter(滤镜)
只支持webkit内核浏览器，不支持IE ；描述：定义了元素(通常是<img>)的可视效果 ；

filter相关函数 ——  grayscale(%)   
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化
-webkit-filter:grayscale(100%);

 sepia(%)    
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间
-webkit-filter:sepia(100%);

saturate(%)
转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1
-webkit-filter:saturate(20%);

hue-rotate(deg)    
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
-webkit-filter:hue-rotate(90deg);

invert(%)    
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
 -webkit-filter:invert(1);

opacity(%)    
转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
 -webkit-filter:opacity(0.5);

brightness(%)
给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
-webkit-filter:brightness(50%);

contrast(%)
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
-webkit-filter:contrast(2);

blur(px)    
给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
-webkit-filter:blur(3px);

9.   transition（过渡）

transition-property
规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）
语法：     transition-property: none | all |  property;
none    没有属性会获得过渡效果。
all    所有属性都将获得过渡效果
property    定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration
属性规定完成过渡效果需要花费的时间（以秒或毫秒计）
语法：     transition-duration: time
值：     time:规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。 示例：     transition-duration: 2s;

transition-timing-function
属性规定过渡效果的速度曲线     该属性允许过渡效果随着时间来改变其速度。
语法：     transition-timing-function: linear | ease | ease-in | ease-out |  ease-in-out | cubic-bezier(n,n,n,n);
linear        规定以相同速度开始至结束的过渡效果，匀速
ease        规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in    规定以慢速开始的过渡效果
ease-out    规定以慢速结束的过渡效果
ease-in-out    规定以慢速开始和结束的过渡效果等于
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

10.   transform
2D变换 — translate平移
transform:translate(x,y)     水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动)
transform:translate(100px,20px):
transform:translateX(n)     仅水平方向移动（X轴移动）
transform:translateY(n)     仅垂直方向移动（Y轴移动）

2D变换 — scale缩放
transform:scale(x,y)     使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
transform:scale(2,1.5)
transform:scaleX(x)     元素仅水平方向缩放（X轴缩放）
transform: scaleY(y)     仅垂直方向缩放（Y轴缩放）

2D变换 — skew倾斜
transform: skew(x,y)     使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）
transform:skew(30deg,10deg):
transform: skewX(x)     仅使元素在水平方向扭曲变形（X轴扭曲变形）
transform: skewY(y)     仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

2D变换 —rotate旋转
transform: rotate(<angle>)     angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋
transform:rotate(30deg):

11.基准点 —— transform-origin

浏览器支持情况： Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。 Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。
在进行transform动作之前可以改变元素的基点位置
语法：      transform-origin: x-axis y-axis z-axis;
x-axis     运动基点在X轴的位置    left/center/right/length/%
y-axis     运动基点在Y轴的位置    left/center/right/length/%
z-axis(3D)    运动基点在Z轴的位置    length
当不设置旋转基点时默认是center center

3D变换 — 创建3D空间
给需要3D效果元素的父级添加 需在外⾯嵌套⼀层，将建⽴3D空间的代码放在外层，即transformstyle:preserve-3d; 然后再进⾏3D变换。这样做的理由是，让他的所有⼦元素都处在3D空间中。
示例： transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;     -o-transform-style: preserve-3d;

3D变换 — perspective(景深)
1.perspective 属性定义 3D 元素距视图的距离，以像素计。
2.当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 注：perspective 属性只影响 3D 转换元素
3.perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。

3D变换 — backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。 如果在旋转元素不希望看到其背面时，该属性很有用。
语法：     backface-visibility: visible | hidden;
    visible：背面是可见的。     hidden: 背面不可见
平移    transform:translate3d(x,y,z)    3D 转化x,y,z为x,y,z轴平移的值
transform:translateZ(z)        定义 3D 转换，用 Z 轴的    
缩放    transform:scale3d(x,y,z)        定义 3D 缩放转换
transform:scaleZ(z)        设置 Z 轴的值定义 3D 缩放
旋转    transform:rotate3d(x,y,z,angle)    定义 3D 旋转。    
transform:rotateZ(angle)        定义沿 Z 轴的 3D 旋转。

12.动画
关键帧 — keyframes
概述:     通过 @keyframes 规则，能够创建动画。     创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。     在动画过程中，能够多次改变这套 CSS 样式。     以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。     0% 是动画的开始时间，100% 动画的结束时间。     为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
语法:     @keyframes animationname {keyframes-selector {css-styles;}}
animationname      ：必需。定义动画的名称。 keyframes-selector ：必需。动画时长的百分比。 合法的值： 0-100%   from（与 0% 相同） to（与 100% 相同） css-styles：必需。一个或多个合法的 CSS 样式属性。

animation-name 属性为 @keyframes 动画规定名称。 语法：     animation-name: keyframename | none;

animation-duration  定义动画完成一个周期所需要的时间，以秒或毫秒计。
语法：     animation-duration: time; 值：     time:规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

animation-timing-function  规定动画的速度曲线。
语法：     animation-timing-function:  linear | ease | ease-in | ease-out |  ease-in-out | cubic-bezier(n,n,n,n);
linear        规定以相同速度开始至结束的过渡效果，匀速
ease        规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in    规定以慢速开始的过渡效果
ease-out    规定以慢速结束的过渡效果
ease-in-out    规定以慢速开始和结束的过渡效果等于
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation-iteration-count  定义动画的播放次数。
语法：      animation-iteration-count: n | infinite;

animation-direction    属性定义是否应该轮流反向播放动画。
语法：      animation-direction: normal | alternate | reverse ;
normal        默认值。动画应该正常播放。
alternate        动画应该轮流反向播放。
reverse    反向运动

animation-play-state   属性规定动画正在运行还是暂停。
语法：      animation-play-state: paused | running;

animation-fill-mode   规定动画结束停留位置
语法：      animation-fill-mode : none | forwards | backwards;
none    不改变默认行为。
forwards    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards    在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义)。