HTML5和CSS3
一、Doctype作用？HTML5为什么只需要些<!doctype html>
<!doctype>声明位于html文档中的第一行，处于<html>标签之前，告知浏览器的解析器什么文档标准解析这个文档，html5不基于sgml，因此不需要对dtd引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
而html4基于sgml所以需要对dtd进行引用，才能告知浏览文档所使用的文档类型
二、html5有哪些新增加和移除了那些元素？如何处理html5新标签的浏览器兼容问题？
新增加的元素有：header article footer nav section video audio canvas等
移除的元素：basefont big center font s strike tt u
处理兼容问题：引入一个兼容的js文件
<!--[if it IE 9]>
<script>
src="http://html5shim.googlecode.com/svn/strunk/html5.js"
</script>
<![endif]-->
三、html5的特点，语义化的重要性？
1）更简洁、但是在实际的开发中要注意书写的规范，利于后期维护
2）标签的语义化
3）语法更宽松
4）多设备跨平台
5）自适应网页设计
重要性：1、当页面加载失败的时候，还能够呈现清晰的结构
2、有利于seo优化，利于备搜索引擎收录(即便于网络爬虫的识别）
3、在项目的开发和维护时，语义化也很大程度上降低了开发难度，节省成本
四、H5新增加的表单元素
search/tel/url/email/number/range/color/file/datetime/date/month/week/time/datetime-local
五、列举几个你熟悉的H5新增加的表单验证？
placeholder,,autofocus,required list autocomplete
六、css3中常用的基本选择器？
后代选择器（e f ） 子元素选择器（e>f) 相邻兄弟元素选择器 （e+f) 通用兄弟选择器（e~f)
七、CSS3的浏览器私有属性前缀是一个浏览器生产厂商经常使用的一种方式，它暗示该css属性或者规则尚未成为w3c的标准的一部分
-webkit- -o-,-moz-,-ms-,(khml现在已经基本没有用了，被webkit取代）
八、css3属性中关于制作动画的三个属性分别是什么？
transform(转换）transition(过度）animation(动画）
九、animation 和transition的区别？
相同点：都是随着时间改变元的属性值
不同点：transition需要触发一个事件（hover事件或click事件等）才会随时间的改变其css属性
而animation在需要触发任何事件的情况下也可以显示的随时间变化来改变元素的css属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值
十、如何指定嵌套元素如何在3d空间中呈现，我们经常提到的3d当中的景深是哪个属性？决定perspective属性的源点角度的属性是什么？决定元素旋转背面是否可见的属性是什么？
transform-style perspective perspective-origin
属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度，backface-visibility属性决定元素旋转背面是否可见
十一、分栏式布局的属性都有哪些？
column-count：分栏的个数
column-width:分栏的宽度
column-gap:分栏的间距
column-rule：分栏的边框
column-span:合并分栏，火狐不支持
day01知识点整理:
一、w3c制定的结构和表现的标准：结构（xhtml ,html),表现（css) ECMA制定的行为表现:行为（dom,ecmascript)
二、w3c（world wide web consortium)万维网联盟，创建于1994年是web技术领域最具备权威和影响力的国际性中立性技术标准机构（制定了结构和表现的标准，非营利性）三、调试工具-浏览器
1）pc端调试工具的使用-浏览器
2）移动端调试工具chrome可测试移动端页面（有很多模拟器）
四、html及先关概念的介绍
HTML指的是超文本标记语言（hyper text markup language)
XHTML指的可扩展超文本标记语言（extensible typertext markup language)
五、xhtml常用的标记
1）文本标记（h1-h6)
六、table数据表格的相关属性
width表格的宽,height表格的高,border表格的边框,bgcolor表格的背景颜色,cellspacing单元格与单元格之间的间距,cellpadding单元格与内容之间的间距；
align水平对齐方式，合并单元格列用colspan,合并单元格行用rowspan
七、表单
<form name="表单名称“ method=“post/get” action=""></form>
文本框text，password密码框，提交按钮submit,单选radio,复选checkbox，按钮button
单选按钮里的name属性必须写，同一组单选按钮额name属性值必须一样
checked="checked"（默认选中）
disabled="disabled"禁用
(submit和button的区别,submit是提交按钮，起到提交信息的作用，button只起到跳转的作用，不进行提交）
扩展：post和get的区别是什么？
八、XHTML元素分类
根据css现实分类，XTML元素被分为三种类型：块元素，内联元素，可变元素
1）块元素的特点
a.常用的块状元素包括 div ,ul,ol,p,h1~h6,form,fieldset,table,tr,td,col,colgroup,dl,dt,dd,hr
b.默认情况下块状元素会独占一行，当有多个块元素时，他们会从上而下排列
c.块状元素可以定义宽高
b.块状元素一般都用做其他元素的容器，他可以容纳其他内联元素和其它块元素，我们可以把这种容器比喻成一个盒子
2）内联元素（行内元素）
a.常见的内联元素有，a,b,strong,em,i,span,del等等
b.内联元素的表现形式是逐行显示
c.内联元素不能定义自己的宽高
d.内联元素也会遵循盒模型的基本规则，比如可以定义padding,border,margin,background等等属性，但是给哦的属性不能正确显示
3）可变元素（需要根据上下文关系来确定是块元素还是内联元素）
九、元素类型的转换
盒子模型可通过diaplay属性来改变其默认的显示类型
1）display属性与属性值（18个属性值）
属性值:inline，inline-block,block,flex,inline-flex,list-items,none,table-header-group/table-footer-group
2)inline-block行内块元素显示，元素的内容以块状显示，行内的其他元素显示在同一行，（只这一个元素类型是支持vertical-align属性）img input
3)none此元素不会被显示
4）list-item将元素类型转换成列表，li的默认类型
十、1、大部分块元素display属性值默认为block，其中li默认值为list-item
2、大部分内联元素的display属性默认为inline，其中img,input,默认为liline-block
十一、position定位属性，检索对象的定位方式
语法position:static/relative/absolute/fixed
其中static是默认值，没有特殊定位，对象遵循htmL原则
absolute：绝对定位，讲对象从文档流中脱离出来，使用left/right/top/bottom等属性响度其最接近的一个并有定位设置的元素进行绝对定位，如果不存在这样的父队形，则依据html根元素，而其层叠通过z-index属性定义
relative相对定位，对象不可层叠，将依据right,top,left,bottom等属性在正常文档流中偏移位置（相对自己原来的位置偏移）
fixed固定定位，对象定位遵从绝对定位方式，但是要遵守一些规范（IE6浏览器不支持此定位，格局浏览器的窗口来定义自己的位置）
十二、包含块的概念和作用
包含块时绝对定位的基础，包含块就是决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的
十三、定义元素我包含块：给绝对定位元素的父元素添加声明：position:relative;
如果我们的父元素设置了position：absolute那么子元素也会相对父元素来定义自己的位置
十四、相对定位和绝对定位的区别
1）参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置
2）绝对定位定位对象从文档流中脱离出来，因此不占据空间，相对定位不破坏正常的文档流顺序，不论是否进行移动，元素任然占据原来的空间
3）定位元素的层叠属性z-index:auto/number
十五、属性oveflow,overflow-x,overflow-y
属性值：visible,auto,hidden,scroll
visible默认值使用该值时，无论设置的width和height是多少，其中的内容无论是否超出范围都将被强制像是，
hidden效果和visible的效果相反，任何超出“width和height的内容都会不可见
scroll无论内容是否超越范围，都将显示滚动条
auto当内容超出范围时显示滚动条，否则不显示
十六、图片整合的优势CSS Sprites
1）减少服务器下载次数，从而提高速度
2）节省空间，通过图片整合来减小图片的体积
十七、过滤器（filter）
1)下划线属性过滤器
2）！important
兼容元素具备最小高度自适应的方法
a.min-height:value;_height:value;
b:min-height:value;heighit:auto!improtant ;height:value;
3）*属性过滤器（当在一个属性前面增加了*后，该属性只能别ie7及以下版本浏览器识别，其他浏览器忽略该属性的作用）
4）扩展内容
\9IE浏览器组 语法：选择符{属性：属性值\9}
\0：ie8包括ie8 语法：选择符{属性：属性值\0}只要ie8以上的浏览器器作用
+：ie7以下（包含ie7)语法：选择符{+属性：属性值 }
：root选择器，除了ie8机更早的浏览器 语法：:root 选择符{属性：属性值}
十八、浮动元素父元素的高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
hack1:给父元素添加声明 overflow:hidden;
hack2:在浮动元素下方添加一个空的div,并给该元素添加声明 clear:both;height:0.overflow:hidden;
hack3:万能清除浮动法 选择符：after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} p{zoom:1}
第三种方式，IE8是以上和非IE浏览器材支持：after,zoom（IE专有属性）可解决ie6,ie7浮动问题
十九、伪对象选择符
：after :before :first-line ;first-letter;
*（伪元素只能用于块级元素）
二十、visibility:hidden/visible和display:none;区别
visibility:hidden属性会使对象不可见，但是该对象在网页所占的空间没有改变，等于留出了一块空白区域，而display:none属性会使这个对象彻底消失
二十一、由于各大主流浏览器由不用的厂商开发啊，所用的核心构架和代码也很难重和，这就容易出现bug,在机上各大厂商出于自身利益考虑而设置的种种技术壁垒
都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去客服的
二十二、浏览器内核及代表作品
浏览器最关键的部分就是他的渲染引擎（rendering engine）也就是大家平常所说的“内核”
二十三、Trident(三叉线 IE)，Gecko(火狐)，presto迅速的(opera)，webkit（safari内核，chrome内核原型，它是苹果公司自己的内核，也是苹果的safari浏览器使用的内核）
blink(由google和opera software开发的浏览器排版引擎）
二十四、五大浏览器内核代表作品
Trident:IE,Maxthon，腾讯，theworld世界之窗，360浏览器
Gecko:代表作品mozilla firefox是开源的，它最大额优势是跨平台，能在microsoft windows linux macos等主要操作系统上运行
Webkit：代表作品是safari chrome，遨游浏览器，是一个开源项目
presto代表作品是opera(前内核)，presto是由opera software开发的浏览器排版引擎，它也是世界上公认的渲染速度最快的引擎，opera现已改用google chrome的blink内核
Blink:由Google和opera software开发的浏览器排版引擎，2013年4月发布
二十五、CSS Bug、CSS Hack和Filter
1)CSS Bug:css样式在各浏览器解析不一致的情况，或者说CSS样式在浏览器中不能正确显示问题称为CSS bug
2)CSS Hack:CSS中hack是指一种兼容css在不同浏览器中正确显示的技巧方法 ，因为他们都属于个人对CSS代码的非官方的修改，或非官方的补丁，有些人更喜欢使用patch(补丁)来秒速这种行为
3）filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法，本质上讲，filter是一种用来过滤不同浏览器的hack类型
二十六、设计HACK和FILTER通常有两种该方法
1）一种是利用浏览器自身的BUG，来隐藏或显示样式或声明
2）另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持来隐藏或显示样式
二十七、
1)在div中插入图片时，图片会将DIV下方撑大三像素
hack1:将div与img写在一行上；
hack2：img转换为块状元素，给Img添加display:block
2)当图片横着排的时候，图片跟图片之间存在一定的间距
hack:img{float:left}
3)dt,li中图片间隙
hack:将<img>转换为块状元素，给img添加声明display:block
4)双培浮动（只有ie6出现）
描述：在ie6中一个居左（或居右）浮动的元素放置进一个容器盒，并在浮动元素上使用了左边距（或右边距）在ie6内便产生了双倍边距
hack:给浮动元素添加一个声明display:inline
5)图片在IE浏览器上有蓝色的边框
hack:给img的边写成0,；img{border:0}
6)默认高度（ie6,ie7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）
hack1:给元素添加声明：font-size:o
hack2：给元素添加声明 overflow:hidden;
7)表单元素距离顶部的距离不一致
hack:给表单元素添加声明：float:left;
8）按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1:统一大小（用a标签模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉
hack3:如果这个按钮是一个图片，直接把图片当做按钮的背景图即可
9）百分比
在ie6及以下版本中解析百分比时，会按四舍五入的方式计算从而导致50%加50%大于100%的情况
hack:给右边的浮动元素添加声明
clear:right
10)透明属性
filter:alpha(opacity=value)取值范围1-100
兼容其他浏览器写法：opacity:0.value(取值范围0-1)
11）子元素没设置任何浮动，设置了margin-top属性后，会错误的吧，margin-top属性添加给父元素
hack1:给父元素添加overflow:hidden;
*如果子元素设置了浮动属性也不会出现这个问题
12）当li里面的a转换成元素的时候，如果想要让所有的列表项目都同一行上显示，需要给Li和a都设置浮动float属性，否则，ie6里面会出现每个li独占一行的情况
二十八、CSS文档统筹
1）整站里吸纳共同的样式提取到一个样式表，各个页面调用相同的样式文件即可
2）网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件
根据页面类型分离文件，根据功能模块分离文件，根据设备类型分离文件，根据代码规模综合
二十九、网页主题优化
实事求是的写下自己网站的名字，网站的名字要合理，最好包含网站的主要内容
三十、页面头部优化
页面头部指的是代码中部分，具体一定就是中的description描述和keywords关键字
1、“描述“部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对您的网站的特点内容加以重复一球突出
2、关键字，，部分应该列出您认为合适的，能突出网站内容的关键字九可以了，关键字不要设置太多，可设置10-8个，引擎值会浏览考前的几个关键字
三十一、超链接优化
1、采用纯文本链接，少用，最好是别用flash动画设置链接，因为搜索引擎无法识别flash上的字
2、按规范书写超链接，这个titile属性，它即可以起到提示访问的作用，也可以让搜索引擎知道它要去哪里
3、最好别使用图片热点链接，理由和第一个差不多
三十二、图片优化（alt属性，title属性）
图片优化并不是修改图片的大小，颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以领搜索引擎机会所有你的网站的图片，对于一些没有什么意义的图片，最好也不要省略alt，而应该留空即alt=""
三十二、为网站制作一个网站地图
三十三、PageRank(pr值友情链接)
三十四、静态和动态页面
三十五、避免大体积的页面
三十六、合理的代码结构
三十七、高级表单
表单的作用：收集用户信息
表单的组成：<form name="" method="" aciton=""></form>
表单字段集<fieldset></fieldset>功能相当于一个方框，在字段集中可以包含文本和其它元素，该元素用于对表单中的元素进行分组i在文档中区别标出来，fieldset可以嵌套，在其内部可以设置多个filedset对象
字段级标题：<legend></legend>功能：legend元素可以在fieldset对象绘制的方框内插入一个标题，legend元素必须是fieldset的第一个元素
表单元素：上传文件框<input type="file"/>
图像域<input type="image" src="" width="" height="" alt=""/>
提示信息标签<label for =绑定控件id名"></label>
三十八、表格的作用：显示数据
1、单元格间距（该属性必须给table添加）border-spacing:value
2、合并相邻单元格边框border-collapse:separate/collapse
3、empty-cells:show/hide
4、table-layout:auto/fixed 固定的表格布局优点是加快运行速度，允许浏览器更块的对表格进行布局 缺点是不太灵活
三十九、caption表格标题
表格标题位置：caption-side:top/right/bottom/left
left/righit只有火狐能识别，top,bottomIE7以上版本支持，ie7以下不支持其他属性值，只识别top
表格重要属性
1）colspan,rowspan
2)水平对齐，align="left/center/right"
3)valign=“top/bottom/middle/baseline"
4)rules=“groups/rows/cols/all/none"添加分隔线
四十、数据行分组
<thead></thead>表头
<tbody></tbody>表体
<tfooter></tfooter>表尾说明：一个table中，只能包含一个thead,一个tfoot,，但可以包含多个tbody
四十一、数据列分组
<colgroup span="value"></colgroup>
<col span="value"/>
说明1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组
2）span属性显示指定相邻几列组成一组，span属性默认为1，默认时仅定义一列为一组
3）可以通过给table添加rules="groups"属性来给分组列添加组分割线
注意：虽然col和colgroup具有相同的功能，但是，我们只是使用colgroup元素来决定表格内容部分分割线应该处于的位置，而col没有这个功能
四十二、CSS滤镜
1）滤镜 语法： {filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishix=finishx,finishy=finishy)}
2)模糊滤镜 语法：{filter:blur(add=add,direction=direction,strength=stength)}
3)斜影滤镜 语法：{filter:shadow(color=color,direction=direction)}
4)发光滤镜 语法：{filter:glow}
5)灯光滤镜 语法：{filter:light}
6)遮罩滤镜 语法：{filter:mask(color=color)}
7)阴影滤镜 语法：{filter：dropshadow（color=color,offx=offx,offy=offy,positive=positive）}
8)灰度滤镜 语法：{filter:gray}
9)翻转滤镜 语法：{filter:filph} {filter:filpv}翻转滤镜主要是实现图像对象的水平或者竖直翻转效果
10）x光滤镜 语法：{filter:xray}
11)倒置滤镜 语法：{filter:invert}
12)波纹滤镜 语法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strenghth)}
四十二、BFC 清除浮动，防止margin重叠等
BFC box formatting context块级格式化上下文
BOX是css布局的对象和基本单位，直观点来说，就是一个页面是由很多个box组成的，元素的类型和display属性，决定了这个box的类型，不同类型box,会参与不同formatting context(一个巨鼎如何渲染文档的容器)因此，box内的元素会以不同的方式渲染，
BFC布局规则：
1、内部的BOX会在垂直方向，一个接一个地放置
2、BOX垂直方向上的距离由margin决定，属于同一个BFC的相邻box的margin会发生重叠
3、每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）及时存在浮动也是如此
4、BFC的区域不会与float box重叠
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此
6、计算BFC的高度时，浮动元素也参与计算
四十三、哪些元素会产生BFC
1、根元素
2、float属性不为none
3、postiion位absolute,fixed
4、display为inline-block,table-cell,table-caption,flex,inline-flex
5、overflow不为visible
四十四、CSS标准盒模型&怪异盒模型
CSS中box model是分为两种：W3C标准,IE标准
大多数浏览器采用W3C标准模型，而IE中则采用microsoft自己的标准
在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
在怪异模式下，一个块的总宽度=width+margin(左右)
四十五、h4文档声明
<!doctype html public"-//w3c//dtd html 4.01 transitional//en"
定义文档类型分为四中：strict(严格型)，transitional(过度型)，frameset(框架型)、手机浏览器DTD mobile
四十六、h5的文档声明
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<titile>无标题文档</title>
</head>
<body>
</body>
</html>
在html4.01中，doctype声明引用文档类型定义dtd（document type definition）因为html 4.01基于SGML（标准通用标记语言）是一种定义电子文档结构和描述其内容的国际标准语言；）dtd规定了标记语言的规则，这样浏览器才能正确的呈现内容
html5不基于sgml，所以不需要引用dtd
提示：请始终向html文档添加doctype声明，这样浏览器才能获知文档类型，
四十七、H5的特点
1）更简洁，但是在实际开发中要注意书写规范，利于后期维护
2）标签更语义化
3）语法更宽松
4）多设备跨平台
5）自适应网页设计
语义化的重要性：
1）当页面加载失败的时候，还能够呈现出清晰的文档结构
2）有利于seo优化，利于别搜索引擎收录（即便于网络爬虫的识别）
3）在项目开发及维护时，语义化也很大程度上降低开发难度，节省了成本
四十八、h5新增加的语义化标签
header头标签，nav,article文章标签，aside，footer,section，figure,video,audio,embed,mark,canvas,datalist,output
seciton表示内容区块，一般入章节，页眉，页脚或者页面中的其他部分，可以与h1~h6等元素结合起来用，标示文档的机构
article标示页面中的一块与上下不相关的独立内容，比如博客中的一篇文章或者报纸中的一篇文章
aside标示article元素的内容之外的，与article元素的内容相关的辅助信息
header表示页面中一个内容区块或者整个页面的标题
footer表示整个页面或者页面中的一个内容区块的页脚
nav表示页面中的导航链接（比如传统的导航条，侧边栏导航）
figure表示一段独立的流内容，一般表示文档主体流内容中的独立单元，使用figcaption元素为figure元素添加标题
video一般支持三种格式的文件，ogg,webm,mpeg4
embed标签用于定义嵌套的内容，包括各种媒体，格式可以是mp3,flash,wav,midi,aiff,au
datalist提供一个事先定义好的列表，通过id与Input关联，当input内输入时就会自动完成autocomplete的功能，用户将会看见一个下拉菜单供其选择
<datalist id="word">
<option value=""/>
<option value="'/>
</datalist>
output表示不同类型的输出，比如脚本的输出
五十、怎样让老浏览器兼容新标签
引入一个js文件
<!--[if it IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
五十一、h5新增加的表单元素
search/tel/url/email/number/range/color/file/datetime/date/month/week/time/datetime-local
五十二、h5新增加的表单验证
placeholder/autofocus/required/list/autocomplete,自动验证
取消验证novalidate
五十三、CSS3的概念和优势
CSS3是css技术的升级版本，CSS3语言是朝着模块化发展的
模块包括：盒子模型，列表模块、超链接方式、语言模块、背景和边框，文字特效，多栏式布局
CSS3是最新的CSS标准
五十四、CSS3选择器
1）属性选择器
2）伪类选择器
动态伪类 a:link,a:visited,a:hover;a:acitve
UI元素状态伪类:enabled;:disabled;:checked;
CSS3的:nth选择器
：first-child选择某个元素的第一个子元素
：last-child选择某个元素的最后一个子元素
：nth-child()选择某个元素的一个或多个特定的子元素
：nth-last-child()选择某个元素的一个或者多个特定的子元素，从这个子元素的最后一个子元素开始算
：nth-of-type（）选择指定的元素
:nth-last-of-type()选择指定的元素，从最后一个开始计算
：first-of-type选择一个上级元素下的第一个同类子元素
：last-of-type选择一个上级元素的最后一个同类子元素
：only-child选择的元素时它的父元素的唯一一个子元素
：only-of-type选择一个元素时它的上级元素的唯一一个相同类型的子元素
：empty选择的元素里面没有内容
否定选择器（:not）
:root选择文档的根元素
：target选择器可用于选取当前活动的目前单元
：lang伪类
3）伪元素选择器
::first-letter ::first-letter ::before ::after ::selection
4)基本选择器
后代选择器
子元素选择器（E>F）
相邻兄弟元素选择器（E+F）
通用兄弟选择器（E~F）
五十五、CSS3渐变
CSS3的渐变分为 linear-gradient radial-gradient
CSS3的渐变可以让你的两个或多个制定的颜色之间显示平稳的过度
linear gradient 向上下左右对角方向渐变
radial gradient由中心渐变
渐变加浏览器前缀的时候是加在属性值上面的
grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
background: linear-gradient(angle, color-stop1, color-stop2);角度是指水平线和渐变线之间的角度，逆时针方向计算，0度将创建一个从下到上的渐变，90度是从左向右的渐变
CSS3渐变支持透明度tansparency可用于创建爱你减弱变淡的效果
background: linear-gradient(angle, color-stop1, color-stop2);
重复的渐变repeating-linear-gradient()
径向渐变的中心是center渐变的形状默认ellipse表示椭圆，也可以是circle
不同尺寸大小关键字的使用
size参数定义了渐变的大小，它可以是以下四个值
colsest-side,farthest-side,colsest-conner,fatherest-conner
box-reflect:none above/below/right/left offset mask-box-image使用百分比来设置生成的倒影与原图之间的间距，此值也可以使用负值
五十六、CSS3过渡
transition缩写
transition-property,transition-duration,transition-delay,transition-timing-function
transition-timing-function默认是ease，有ease,ease-in,ease-out,ease-in-out,linear,cuber-bezier
五十七、2D转换
translate(),rotate(),scale(),skew()