CSS3简介
CSS3的现状
- 浏览器支持程度差，需要添加私有前缀；
- 移动端支持优于PC端；
- 不断改进中；
- 应用相对广泛，
-webkit-border-radius(radius 半径)。
- 要遵循渐进原则。
准备工作
环境准备
- 由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。
- Chrome浏览器 version 46+
- Firefox浏览器 firefox 42+
如何使用手册
- 程序开发是一个不断学习的过程，学会使用工具，可以让我们事半功倍。
-
[]：表示全部可选项 padding -
||：1个或者更多； -
|：多选一； -
?：表示0个或者1个； -
*：表示0个或者多个； -
{}：表示范围。 -
注：学习过程中一定要学会查看手册，培养自主学习能力。
基础知识
选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
-
之前学过的选择器：
- div{}：标签选择器；
- .box{}：类选择器；
-
#box：id选择器； - div p：后代选择器；
- div.box：交集选择器；
- div,p,span：并集选择器；
- div>p：子代选择器；
- *：通配符；
- div+p：选择div后面的第一个兄弟p（p必须要紧跟在div之后）；
- div~p：选中div后面所有的兄弟p。
属性选择器:[]
其特点是通过属性来选择元素，具体有以下5种形式：
E[attr]，表示存在attr属性即可：
div[title]：表示页面中带有title属性的div；E[attr=val]表示属性值
完全等于val：div[class=mydemo]；E[attr*=val]表示的属性值里包含val字符并且在“任意”位置：div[class*=mydemo];E[attr^=val]表示的属性值里包含val字符并且在“开始”位置：
div[class^=mydemo]；E[attr=demos]`；
案例：配合jQuery 的过滤选择器
伪类选择器
除了以前学过的:link、:visited、:hover、:active、:focus，CSS3又新增了其它的伪类选择器。
以某元素相对于其父元素或兄弟元素的位置来获取元素的
结构伪类。重点理解通过E来确定元素的父元素；
所选到的元素的类型，必须是指定的类型E，否则无效。
E:first-child：第一个子元素；E:last-child：最后一个子元素；E:nth-child(n)：第n个子元素，编号从1开始，计算方法是元素E的全部兄弟元素；
//第三个元素
div>ul>li:nth-child(3){
color: deeppink;
}
- E:nth-last-child(n)同E:nth-child(n) 相似，只是倒着计算；
div>ul>li:last-child(2){
color: deeppink;
}
- n遵循`线性变化`，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。
- 选中所有的奇数的li：`括号中的表达式形式必须是n在前`
li:nth-child(2n-1){
color: red;
}
- 选中所有的7的倍数的li：
li:nth-child(7n){
color: red;
}
- 选中前面五个：
li:nth-child(-1n+5){
color: red;
}
- 选中后面五个：
li:nth-last-child(-1n+5){
color: red;
}
- 所有的偶数
li:nth-child(even){
color:red
}
- 所有的奇数
li:nth-child(odd){
color:blue;
}
- n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
- 案例：日历图。
E:empty：选中没有任何子节点的E元素（使用不是非常广泛），没有任何的子元素，包括空格，即元素为空的状态。目标伪类：
E:target结合锚点进行使用，处于当前锚点的元素被选中，表示元素被激活的状态；
CSS (层叠样式表)
CSS (层叠样式表)
h2:target{
color:red;
}
- 点击章节进行相应跳转变色。
伪元素选择器
- 伪元素：
- 重点：
E::before、E::after，是一个行内元素，需要转换成块元素； - E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做
兼容处理，必须要有content，否则无法显示。E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解。
.box::before{
content:"今天";
}
.box::after{
content:"真好";
}
- 伪元素选择器：
- E::first-letter文本的第一个字母或
字（如中文、日文、韩文等）； - 案例：首字下沉
- E::first-line，文本第一行；
- E::selection，选中的文本，可以根据这个效果去更改选中区域的样式（可以更改背景颜色和文字颜色，但是不能改变字体大小）；
-
":"与"::"区别在于区分伪类和伪元素 - 关于before和after：
- CSS2中，E:before或者E:after，是属于伪类的，并且没有伪元素的概念；
- CSS3中，提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者E:after伪类。
颜色
一种新的颜色的表示方式：rgba(255,0,0,0.1)，RGBA是代表Red（红色）、Green（绿色）、Blue（蓝色）和Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间。
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA；
R、G、B 取值范围0~255。
Hue、Saturation、Lightness、Alpha即HSLA；
H：色调，取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色；
S：饱和度，取值范围0%~100%；
L：亮度，取值范围0%~100%；
A：透明度，取值范围0~1。
关于透明度：
opacity，只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度（此时不能再设置子盒子的透明度）；
transparent，可以单独设置透明度，但是不可调节透明度，始终完全透明；
RGBA、HSLA可应用于所有使用颜色的地方。
案例：
opacity，设置透明度，只能针对整个盒子设置透明度，子盒子会继承父盒子的透明度。
.out{
width: 200px;
height: 200px;
background: green;
border: 1px solid darkgreen;
margin: 40px auto;
opacity: 0.3;
}
子盒子也出现透明
.out .inner{
width: 100px;
height: 100px;
background-color: yellow;
}
- background-color: transparent，完全透明，不可调节透明度.
- 使用rgba来控制颜色，相对opacity ，
不具有继承性。
文本 (shadow阴影)
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
- 水平偏移量，正值向右，负值向左；
- 垂直偏移量，正值向下，负值向上；
- 模糊度不能为负值，值越大越模糊；
- 颜色，设置对阴影的颜色，可以有多个影子。
代码演示：
// 3px，水平偏移量。正值向右 负值向左
//5px，垂直偏移量，正值向下 负值向上
//5px，模糊度，模糊度不能为负值，值越大越模糊
//#ccc，设置对象阴影的颜色。可以有多个影子.
ul>li{
margin: 20px;
font-size: 24px;
}
ul>li:nth-child(1){
text-shadow: 5px 5px 2px #ccc;
}
ul>li:nth-child(2){
text-shadow: -5px -5px 2px #ccc;
}
ul>li:nth-child(3){
text-shadow: 5px 5px 2px #ccc, -5px -5px 2px #ccc;
}
- 案例：浮雕文字.
/*设置背景色.*/
body {
background-color: gray;
font: bold 6em "microsoft yahei";
}
div {
margin: 30px;
color: #808080;
text-align: center;
}
/*设置水平向左1px 向上1 px 向右1px 向下1px */
.to{
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
.ao{
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
盒模型
CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
box-sizing有两个值:content-box、border-box。可以分成两种情况：
content-box:外加模式，对象的实际宽度等于设置的width值和border、padding之和；border-box：内减模式，对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )，我们把这种方式叫做盒模型。默认是外加模式。
兼容性比较好。
练习：图片展示（内减模式）
浏览器私有化前缀：
- 谷歌、Safari浏览器内核：-webkit-；
- 火狐浏览器内核：-moz-；
- IE浏览器内核：-ms-；
- 欧鹏浏览器内核：-o-；
.box{
width:200px;
height:200px;
border:1px solid #000;
/*background:linear-gradient(left,red,blue);*/
/*以上属性，一般的浏览器都不支持，加上对应的前缀即可被相应的浏览器识别，如下*/
background:-webkit-linear-gradient(left,red,blue);
background:-moz-linear-gradient(left,red,blue);
background:-ms-linear-gradient(left,red,blue);
background:-o-linear-gradient(left,red,blue);
}
边框
-
边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，需要重点掌握。
边框圆角
-
border-top-radius：每个角可以设置两个值，第一个值x值是水平方向上的值，第二个y值是垂直方向上的值； - border-radius:可以有一个值、两个值、三个值、四个值，还可以用“/”分割横坐标和纵坐标的值；赋值顺序，从左上顺时针进行赋值，如果没有值就取对角的值；
- 边框圆角处理、正方形、扇形；
- 椭圆，圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。
- 以“/”进行分隔，可分别设置长、短半径，遵循顺时针规则，左上角为1，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）
border-radius:40px 50px 20px 40px / 10px 10px 10px 10px;
边框阴影
box-shadow与text-shadow用法差不多.
- 水平偏移量，正值向右，负值向左；
- 垂直偏移量，正值向下，负值向上；
.box{
box-shadow: 5px 5px 5px 27px red, -5px -5px 5px -5px green;
}
- 模糊度是不能为负值；
- 阴影大小；
- 阴影颜色；
- inset可以设置内阴影；
.box{
box-shadow:inset 5px 5px 5px 5px red,inset -5px -5px 5px -5px green;
}
7 注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感。
边框图片（了解）
-
border-image：设置边框的背景图片；
border-image: url("images/border.png") 27/20px round
- 盒子的总宽高不会改变；
-
border-image-source:url("")：设置边框图片的地址； -
border-image-slice:27,27,27,27：裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片； -
border-image-width:20px;：指定边框的宽度； - 边框平铺的样式：
border-image-repeat: stretch; - stretch，拉升；
- round：平铺，会自动调整缩放比例（如果谷歌版本很高可能会出现问题）；
- repeat(重复)：正常平铺，但是可能会显示不完整。
- 设置的图片将会被“切割”成九宫格形式，然后进行设置：
- “切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
- 其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺;
round和repeat之间的区别:
round会自动调整尺寸，完整显示边框图片。
repeat单纯平铺多余部分，会被“裁切”而不能完整显示。
更改裁切尺寸:
background-slice: 34 36 27 27
- 关于边框图片重点理解9宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活运用会给我们带来不少便利。
- 案例：用css 实现
渐变
- 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
线性渐变 （gradient 变化，属于背景图片里）
- linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
- 例如从黄色水平渐变到绿色：
background-image:linear-gradient(
to right, 表示方向 (left,top,right,left ,也可以使用度数)
Yellow, 渐变起始颜色
Green 渐变终止颜色
)
background:linear-gradient(
to right,
red 0%, red 25% ,
blue 25%,blue 50%,
green 50%,green 75%,
pink 75% ,pink 100%
); //前一个是起始颜色，后一个是终止颜色，百分比为占总长度的百分比
.box6{
width: 600px;
height: 150px;
background: linear-gradient(135deg,#000 0%, #000 10%, #fff 10%, #fff 20%,#000 20%, #000 30%, #fff 30%, #fff 40%,#000 40%, #000 50%, #fff 50%, #fff 60%,#000 60%, #000 70%, #fff 70%, #fff 80%,#000 80%, #000 90%, #fff 90%, #fff 100%);
animation: gun 5s linear infinite;
background-size: 100px 150px;
}
@keyframes gun {
from{
}
to{
background-position: 100px 0px;
}
}
- 必要的元素：
- a、方向
- b、起始颜色
- c、终止色；
- 方向：垂直向上为0度，顺时针逐渐增大。
径向渐变 (radial 径向)
-
radial-gradient：径向渐变指从一个中心点开始，沿着四周产生渐变效果：
background: radial-gradient(
150px at center,
yellow,
green
);
围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变。
必要的元素：
a、中心点，即圆的中心(中心点的位置是以盒子自身)
background: radial-gradient(
150px at left center,
yellow,
green
);
以左上角为圆的中心点
background: radial-gradient(
150px at 0px 0px,
yellow,
green
);
- b、渐变起始色
- c、渐变终止色
- 关于中心点：中心位置参照的是盒子的左上角；
- 关于辐射范围：其半径可以不等，即可以是椭圆；
div{
width: 300px;
height: 300px;
margin:100px auto;
background: radial-gradient(
250px at 0px 0px,
yellow,
green
);
border-radius: 150px;
}
背景
- 背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
- background-size:width,height,可以设置背景图片的宽度以及高度。
background-size设置背景图片的尺寸
background-size:600px auto;：自动是适应盒子的宽度；background-size:100% 100%;：通过百分比设置背景图片大小；通过具体数值来调整背景的尺寸：
background-size: 100px 100px;。cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏，图片有可能不完整显示。contain：会自动调整缩放比例，保证图片始终完整显示在背景区域；但是不保证铺满盒子，也可以使用长度单位或百分比 。案例:全屏背景自动适应。
background-origin(原点，起点)设置背景定位的原点
- 所谓的背景原点就是调整背景位置的一个参照点，调整背景图片定位的参照原点。
- border-box以
边框做为参考原点； - padding-box以
内边距做为参考原点(默认值)； - content-box以
内容区做为参考点。
background-clip设置背景区域clip(裁切)
- border-box裁切
边框以内为背景区域，边框外边缘； - padding-box裁切
内边距以内为背景区域； - content-box裁切
内容区做为背景区域；
以逗号分隔可以设置多背景，可用于自适应局
- 背景图片尺寸在实际开发中应用十分广泛。
案例：
- 相框；
相框
永垂不朽
- 手机界面。
- 如果有背景颜色，必须加载最后一个url后面。
相框
过渡(transition)重点
- Transition:param1 param2
- param1：要过渡的属性；
- param2：过渡的时间。
- 过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果；
- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态；
- 帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
- 关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
- 特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
- 相关属性：
- transition-property设置过渡属性；，默认值为all；
- transition-duration设置过渡时间，
- transition-timing-function设置过渡的动画类型，linear(匀速)、ease-in (由慢到快)、ease（平滑过渡，默认值）；
- transition-delay设置过渡延时，过了多长时间后执行动画。
案例：
- 气泡
气泡
- 商品列表
边框阴影
- 手风琴效果
手风琴
新闻标题
新闻标题
新闻标题
新闻标题
2D转换重点
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合刚学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过
transform(变形)来实现2d 或者3d 转换,其中2d 有：缩放、移动、旋转。移动
translate(x,y)可以改变元素的位置，x、y可为负值，移动位置相对于自身原来位置；x，在水平方向移动；
y，在垂直方向移动；
如果只有一个参数，默认为水平方向;
除了可以是像素值，也可以是百分比，相对于
自身的宽度或高度。缩放
scale(x,y)可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值，大于1时为放大，小于1时为缩小。旋转
rotate(45deg)，可以对元素进行旋转，正值为顺时针，负值为逆时针。当元素旋转以后，坐标轴也跟着发生转变；
调整顺序可以解决，把旋转放到最后。
倾斜：
skew(deg,deg)可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0；第一个值为水平方向上倾斜的角度；
第二个值为垂直方向上倾斜的角度
矩阵：
matrix()把所有的2D转换组合到一起，需要6个参数（了解）。transform-origin：可以调整元素转换的原点。我们可以同时使用多个转换，其格式为：
transform: translate() rotate() scale();...等，其顺序会影响转换的效果。
案例
- 盒子水平居中对齐；
.box{
//距父盒子左侧距离为父盒子宽度一半
margin-left:50%;
//往左侧移动自身宽度的一般
transform:translate(-50%);
}
- 火箭移动;
小火箭
- 盾牌，将位置还原
盾牌
- 旋转 原点:transform-origin:left top;
对话框
- 扑克牌
- 心形
3D转换
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
CSS中的3D坐标系：
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度。
-
借助示例理解3D转换：
- 绕X轴旋转;
- 绕Y轴旋转;
- 绕Z轴旋转;
- 在X轴移动;
- 在Y轴移动;
- 在Z轴移动。
左手法则
- 左手握住旋转轴，竖起拇指指向旋转轴正方向，
正向就是其余手指卷曲的方向。
透视（perspective）
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的，并不是真正的3D。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法
- 作为一个属性，设置给父元素，作用于所有3D转换的子元素；
- 作为transform属性的一个值，做用于元素自身(使用较少)。
- 理解透视距离:
- 透视会产生“近大远小”的效果.
案例：
- 音乐盒；
3D
- 百度钱包；
- 设置元素背面是否可见：
backface-visibility;；
- 翻转的文字；
- 通过伪元素来获取自定义属性的值：
attr(data-text);
- 3D导航；
- 立体导航栏。
3D呈现（transform-style）
设置内嵌的元素在3D空间如何呈现，这些子元素必须为转换原素.
flat：所有子元素在 2D 平面呈现;
preserve-3d：保留3D空间;
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:preserve-3d来使其变成一个真正的3D图形。
案例：
- 立方体;
- 3D导航；
- 立体导航条
动画
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
必要元素：
通过@keyframes指定动画序列；
通过百分比将动画序列分割成多个节点；
在各节点中分别定义各属性
通过animation将动画应用于相应元素；
使用：
类似js中的函数：先定义，再调用；
定义动画：
@keyframes 动画名{
from{初始状态}
to{结束状态}
}
- 定义多组动画：
@keyframes move{
0%{}
25%{}
50%{}
75%{}
100%{}
}
- 调用：
- 基本调用方式：
animation: 动画名称 持续时间 (执行次数：3，infinite);
- 关键属性
-
animation-name：设置动画序列名称；
animation-duration动画持续时间；
animation-delay动画延时时间；
animation-timing-function动画执行速度（运动曲线）：linear、ease等；
animation-play-state动画播放状态，running、paused等；
animation-direction动画的方向：normal正常，alternate可逆等；
animation-fill-mode动画执行完毕后状态：forwards（结束后保持结束时的状态）、backwards（结束后保持开始时候的状态）等；
animation-iteration-count动画执行次数：可以是具体数字或者inifinate等；
steps(60) 表示动画分成60步完成。
参数值的顺序：关键几个值，除了名字、动画时间、延时有严格顺序要求，其它随意。
案例
- 捕鱼达人；
- 太阳系；
- 全屏切换；
- 钟表；
- 大海波涛；
- 无缝滚动。
伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
学习新的概念：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向；
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的；
方向：默认主轴从左向右，侧轴默认从上到下；
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
必要元素：
指定一个盒子为伸缩盒子 display: flex;；
设置属性来调整此盒的子元素的布局方式，例如：flex-direction；
明确主侧轴及方向；
可互换主侧轴，也可改变方向。
各属性详解
- flex-direction调整主轴方向（默认为水平方向）该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置：
row，水平方向；
reverse-row，反转(也反序)，从最右边开始向左排列，顺序发生改变，从最右边开始；
column，垂直方向；
reverse-column 反转列。
justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式：
flex-start，起点对齐；
flex-end，终点对齐，顺序不变；
center，中间对齐；
space-around，环绕（自动平分空白区域）；
space-between，两端对齐（中间空白区域自动平分）。
flex：多个子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配；
align-items设置或检索弹性盒子元素在侧轴（竖轴）方向上的对齐方式：
flex-start，起点对齐；
flex-end，终点对齐；
center，居中对齐；
stretch，拉伸。
flex-wrap控制是否换行；
案例
- 微信底部；
- 携程；
多列布局
- 类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。
/* 分几列*/
-webkit-column-count:3;
/* 分割线*/
-webkit-column-rule:1px dashed red;
/*设置列间距*/
-webkit-column-gap:60px;
/* 列宽度*/
-webkit-column-width: 400px;
- 如果给标题设置跨列等属性：
-webkit-column-span:all;
text-align:center;
- 了解即可，实际意义不大。
案例
- 新闻
Web字体
- 开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。支持程度比较好，甚至IE低版本浏览器也能支持。
字体格式(认识字体)
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
TureType(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
Web Open Font Format(.woff)格式
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
下载字体网站：推荐http://www.zhaozi.cn/ 和 http://www.youziku.com/ 查找更多中文字体。
如果要在网页中使用web字体（用户电脑上没有这种字体），具体使用步骤：
导入对应的字体包；
声明字体：告诉浏览器，去哪里找这个字体；
定义一个类，谁用这个类名，就会使用相应的字体。
web字体使用
寻寻觅觅，在无声无息中消失。。。
寻寻觅觅，在无声无息中消失。。。
字体图标
其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
将所有图标打包成字体库，减少请求；
具有矢量性，可保证清晰度；
使用灵活，便于维护；
Font Awesome 使用介绍：http://fontawesome.dashgame.com/
定制自已的字体图标库：http://iconfont.cn/ 和 https://icomoon.io/
SVG素材：http://www.iconsvg.com/
使用：
首先在阿里文字图片里面找到需要的图片，然后加载到本地，引入到项目中；
声明图标文字；
定义一个类；
在需要的地方使用这个类，要配合对应的图片编码（图片编码在demo中）使用。
需要什么图标查找对应的编码即可：
web字体使用
扫码取件
兼容性
通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
我们需要知道每个属性，能被哪个版本的浏览器支持。
高级应用
360 案例:
- 监听滚轮
document.onmousewheel=function(){}
需要处理兼容（我们是靠监听滚轮的事件来处理的）;
我们需要使用到插件，(滚屏插件) 基于jQuery 的一个插件jQuery fullPage，全屏滚动插件，中文网址:http://www.dowebok.com； 相关说明:http://www.dowebok.com/77.html
对应的颜色
sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6']
loopTop:true，滚到顶部,回到最后一屏；
js代码：
$(function(){
$('#dowebok').fullpage({
sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
loopTop:true,
afterLoad:function( anchorLink ,index){
console.log(index);
$('.section').removeClass('current');
setTimeout(function(){
$('.section').eq(index-1).addClass('current');
},100);
}
});
});