【从入门到放弃】WEB前端之04-CSS3新特性

如果说前面几天的内容都是基础，那么从这开始可以到进阶了，今天就说下CSS3新增的炫酷样式变形动画2D/3D一个都不能少，当然它的浏览器支持情况只有主

流浏览器，一些低版本的浏览器可以回家看神偷奶爸3了毕竟写了也出不来

一、开始写CSS3了，那么为了避免浏览器兼容问题，先来看看浏览器的世界大战

为什么浏览器们不能一起好好玩，为什么要有千奇百怪的兼容性问题？

(1)由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。

(2)再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的

目前主流浏览器Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游

最早的浏览器 : Mosaic  /  Netscape Navigator(网景领航者)（1994-2008）简称NN

了解下浏览器大战

第一次浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape Navigator大打出手。微软当时1000多人，网景也就10几个人，第一次浏览器大战以微软完胜告终。但是网景不气馁，将源码开源，重组Mozilla，加上其他浏览器的加入，第二次浏览器大战发生在20世纪，开始了混战

看到浏览器的混战不由得让我想起网上一幅图，完了笑点越来越低了

浏览器市场份额（2016.12-2017.2）

浏览器内核代表作品

Trident:IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器

代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。

Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。

Webkit :代表作品Safari、Chrome ，是一个开源项目。

Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。

以后我们要在编写的样式前要加好前缀，例如：

div
{
-ms-transform: translate(50px,100px);/* IE 9 */
-webkit-transform: translate(50px,100px);/* Safari and Chrome */
-o-transform: translate(50px,100px);/* Opera */
-moz-transform: translate(50px,100px);/* Firefox */
transform: translate(50px,100px);
}

注意书写顺序也是有一定讲究的

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

二、CSS3 新特性 之 border 边框

1. 圆角 border-radius：当写一个值的时候表示四个角都有圆角边框，如果希望对每个角单独设置可以使用border-radius:10px 20px 30px 40px;四个角的顺序为左上角，右上角，右下角，左下角。两个值的话第一个值是左上右下，第二个值是右上左下。三个值的话第一个是左上角，第二个值是右上角、左下角，第三个值是右下角。有点像绕口令的赶脚，平平仄仄平平仄仄咳就了解下反正也很少这样写

如果不想使用简写的方式，也可以单独设置：

border-top-left-radius: //左上角

border-top-right-radius: //右上角

border-bottom-right-radius: //右下角 

border-bottom-left-radius: //左下角 

写法很充分，怎么写你开心就好

小技巧：一般使用圆角无非两种情况，一个是四个角设置圆角border-radius:2px，二个是写一个圆，如果需要一个圆的话，可以直接写border-radius:50%

扩展了解：设置透明边框border:5px dashed transparent;

2. 边框图片border-image：url（图片路径）A B C D /border-width  topbottom  leftright 当然这个是一个简写版本，全的话就是以下：

图片地址border-image-source：这个相当于图片的路径，这个比较好理解了，不赘述了

图片切片border-image-slice：这个有点小复杂，首先注意了这块填写的数字不可以加px这类的单位，直接填写数字或者百分比就可以，这个地方有四个值可以填写，顺序的话和margin一样是上右下左，但是想要了解具体切片怎么分割的可以看下下图

注意:具体显示的时候，四个角上的border-top-left-image、border-top-right-image、border-bottom-left-image、border-bottom-right-image 这四部分是没有任何显示效果的，不会平铺，不会重复，也不会拉伸，类似于视觉中的盲点。

图片宽度border-image-width 用来指定元素边框的宽度，也可以简写在border-image中，这个地方定义宽度的写法和margin一样，顺序也都是上右下左

图片重复border-image-repeat 用来指定元素四条边中的图像是以什么方式显示出来，比如是平铺的呀还是拉伸呢，图中只有用红色框圈起来的是可以设置平铺或拉伸效果的。

例如：border-image-repeat:repeat(平铺) stretch(拉伸) 如果两个都写上，则表示，第一个值是上下两条边中图像显示方法，第二个值是左右两边中的显示方法。

三、CSS3新特性之 阴影，如果你面前阴影别怕，是因为背后有光

1.  盒子阴影 box-shadow：阴影的x轴(可以负值)，阴影的y轴(可以负值)，模糊距离，阴影的大小，阴影的颜色，内阴影 inset or外阴影不写就是外阴影咯

如果box-shoadow:0 0 10px 5px red; 当x和y的值为0的时候表示阴影会在当前位置，x轴和y轴的值调整，正数的话是向右向下，负值的话向左向上

扩展了解：怎么单独设置阴影？

<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 

0px -10px 10px #000,  /*上边阴影*/ 

10px 0px 10px green,  /*右边阴影*/ 

0px 10px 10px blue;" /*下边阴影*/ > 

</div>

2. 文字阴影 text-shadow：水平阴影的位置，垂直阴影的位置，模糊的距离，阴影的颜色（x和y的值调整正数的话阴影方向是向右向下，负值的话向左向上）

当然你可以写多个，通过逗号进行分隔

四、CSS3新特性之 背景

1. background-image

设置背景图片的这个方式我们之前一直在使用，肯定都没问题，这块补充一个用法，就是你可以给元素设置多个background-image，多个的话都会显示出来

background:url（a.jpg）, url（b.jpg）当然咯背景的话默认是平铺的，你为了都能看到这些背景，先加一个no-repeat

2. background-size：控制背景图像的尺寸，可以指定数字或者百分比当然还有它给我们提供的一些选项，比如cover或者contain

例如：background-size：20px 30px; 第一值表示背景图片的宽度，第二个值表示高度

cover：表示将背景图片放大到适合容器的大小，但这种方法会让背景图片失真

contain：和cover刚好相反，它主要是将背景图片缩小，以适合铺满整个容器

默认的值是auto，表示保持背景图片的原始高度和宽度

3. background-origin：该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置。

通过上图我们可以发现，背景颜色和背景图片的起点和终点不同，but 我们可以自由设置

注意：如果背景图像background-attachment是"固定"，这个属性没有任何效果。

background-orgin属性可以选择的值有以下三个：

padding-box 背景图像填充框的相对位置

border-box 背景图像边界框的相对位

content-box 背景图像的相对位置的内容框

4. background-clip：用来修改背景的显示范围

上图我们都很熟悉了，盒子模型，那么我们设置一个元素的背景，其实设置的是content部分，那么CSS3提供的background-clip可以修改显示的范围，它提供的几个属性值如下：

border-box 表示背景范围包括边框区域（默认）   

padding-box表示背景被裁剪到内边距框不包括边框

content-box背景被裁剪到内容框，不包括内边距区域和边框区域

3个属性值对应的效果图如下：

注意：background-origin 和 background-clip 看着很像，效果也一样，区别在哪呢？background-origin用于标记背景从哪个点开始绘制，这个在你的代码里有position的时候就会发现，定位的时候是按照你设置的origin的点来开始计算的

5. 背景渐变Gradients

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

名词解释下什么是线性渐变：在线性渐变过程中，颜色沿着一条直线过渡，从左侧到右侧，从右侧到左侧，从顶部到底部，从底部到顶部或者沿任何任意轴。

语法：background:linear-gradient(渐变方向,color1,color2,color3…) 别忘了加上前缀 -webkit- 什么什么的

渐变方向：bottom bottom right, right, top right, top, top left, left, bottom left,30deg（30度）

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度。

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

例如：background:linear-gradient(270deg,red,blue,black);

注意：CSS3也支持透明度（transparency）,可用于创建减弱变淡的效果

repeating-linear-gradient() 用于重复线性渐变

{background: repeating-linear-gradient(red, yellow 10%, green 20%) ; }

注意：用到重复性时前提是渐变的区域不能是100%，不然无法显示平铺的效果

径向渐变（Radial Gradients）-径向渐变就是从一个点开始向外扩展为一个圆形或者椭圆，因此，径向渐变首先需要确定一个中心点，然后是大小和形状。径向渐变的颜色节点同线性渐变一样，是一个颜色列表。

语法：-webkit-radial-gradient（设置渐变的中心，渐变形状渐变大小，起始颜色值，中间颜色值中间颜色位置，终点颜色）

创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）

渐变的大小是 farthest-corner（表示到最远的角落）

渐变方向：

center center ：中心点扩散（默认）

left top:从左上角扩散

center top 从顶部中间扩散

right top 从右下角向外扩散

right center 从右端中央向外扩散

right bottom 从右下角向外扩散

center bottom 从底部中央向外扩散

left bottom 从元素左上角向外扩散  

渐变形状：

Circle圆形渐变

Ellipse 椭圆渐变  

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

那如果有了背景渐变还可以加背景图片么，答案是可以的 background:url(logo.png), radial-gradient( circle, #ace, #f96, #1E90FF);

额(⊙o⊙)… 上面记录了一堆属性，但是实际写的还是用默认的，写这么多，大家了解下了

background:repeating-radial-gradient()重复径向渐变

background:-webkit-repeating-radial-gradient(left, circle, #ace 10%, #f96 20%, #1E90FF 40%);

五、CSS3新特性之 2D/3D 转换 transform ：平移/旋转/缩放/倾斜

1. translate（x坐标，y坐标）方法控制元素从当前位置移动，transform:translate(150px,200px) 

填写正数的话是向右，向下，负数的话是向左、向上

当前如果你只想向一个方向移动 translateX 和 translateY ，如果说只填写了translate(150px)则效果呢等同于translateX(150px)

例如：transform:translate(150px,200px) 这句代码对应的移动过程如下图，黑点为元素的中心点

注意：位移不会改变元素的文档流

注意：一般刚开始看都会分不清楚原点在哪，从哪开始，原点的话在元素的中心点，也就是该元素围绕着这个点变形或旋转，当然也只有该属性在设置

transform属性的时候起作用，当然这个是默认情况，你也可以修改它

怎么修改元素变形的基准点？

答：通过transform-origin:水平方向(left center right)  垂直方向(top center bottom) 

注意：原点一般设置在未变换之前。

2. rotate(xdeg) 方法根据给定的角度让元素顺时针（正数）/逆时针（负数）旋转【deg是degree的缩写，意为角度】

例如：transform：rotate(20deg)

写一个扑克牌的效果感受下rotate的效果

案例源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background:#ABC;
}
.Showbox{
height: 400px;
width:200px;
margin:100px auto;
position:relative;
}
.Showbox img{
height:400px;
width:200px;
box-shadow: 4px 4px 7px gray;
border:1px solid darkseagreen;
border-radius: 7px;
position:absolute;
transition: all 3s;
-webkit-transition: all 3s;
transform-origin:bottom center;
}
.Showbox:hover .img8{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-moz-transform:rotate(40deg) ;
}
.Showbox:hover .img7{
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform:rotate(30deg) ;
}
.Showbox:hover .img6{
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-moz-transform:rotate(20deg) ;
}
.Showbox:hover .img5{
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
-moz-transform:rotate(10deg) ;
}
.Showbox:hover .img4{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform:rotate(0deg) ;
}
.Showbox:hover .img3{
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
-moz-transform:rotate(-10deg) ;
}
.Showbox:hover .img2{
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
-moz-transform:rotate(-20deg) ;
}
.Showbox:hover .img1{
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
-moz-transform:rotate(-30deg) ;
}
</style>
</head>
<body>
<figure class="Showbox">
<img class="img1" src="img/1.jpg"/>
<img class="img2" src="img/11print.jpg"/>
<img class="img3" src="img/12print.jpg"/>
<img class="img4" src="img/14print.jpg"/>
<img class="img5" src="img/1print.jpg"/>
<img class="img6" src="img/7print.jpg"/>
<img class="img7" src="img/6print.jpg"/>
<img class="img8" src="img/3print.jpg"/>
</figure>
</body>
</html>

3. skew(30deg,40deg) 方法用来实现元素的倾斜处理，第一个参数为水平方向倾斜角度，第二个参数为垂直方向倾斜角度

也可以分开来写skewX(30deg) / skewY(30deg),如果给写skew(30deg)一个值的话同skewX（30deg），倾斜的到底是怎么倾斜的，看到下面的图一下子就理解了

4. scale(x，y) 方法用来实现元素的缩放处理,参数表示水平方向/垂直方向要缩放的倍数，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小

如果传入0的话，元素则不可见

以下是3D变形转换，我们已经成功从二维平面跨入了三维立体

3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；

3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；rotate3d()四个功能函数；

3D缩放：CSS3中的3D缩放主要包括scaleZ()

为了更好理解三维坐标，我们从rotate开始。rotateX()、rotateY()、rotateZ()

先看看这个三维坐标图吧，x,y,z 那么rotateX()是怎么转呢，可以想想夏天最喜欢的烤羊肉串或者中国奥运会奖牌最多的体操队，他们的运动就是rotateX()

著名的钢管舞其实就是rotateY() 那么方向盘比做rotateZ()最贴切不过了，下面看下如下代码对应的效果

    <style>
        div{
            width: 200px;
            height: 200px;
            background: url(qy.jpg);
            background-size: 200px 200px;
            transform: rotateY(80deg);
        }
    </style>

如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标，则translateZ则可以帮你理解透视位置，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们

眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大。

实现3D的关键就是要有perspective视距，必不可少的属性：perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D 

transform. 这不难理解，没有透视，不成3D.，当然没有perspective 写了translateZ也没什么效果

怎么计算perspective的值：假设屏幕分辨率为1680*760那么人眼睛距离显示器的距离是1.2个屏幕的宽度，1680*1.2=2000 perspective属性设置镜头到元素平面的

距离。比如perspective(300px)表示，镜头距离元素表面的位置是300像素

理解perspective： perspective只能设px值，不能设%百分比。值越小表示用户眼睛距离屏幕越近，相当于创建一个较大的3D舞台。反之，值越大表示用户眼睛距

离屏幕越远，相当于创建一个较小的3D舞台。这很容易理解，离的越近东西看起来越大，离的越远东西看起来越小。

图中d就是perspective视距，Z就是translateZ轴的位移。Z轴正向位移时，3D舞台将放大。反之，Z轴负向位移时，3D舞台将缩小。上图Z是d的一半，因此3D舞台

上的元素将是原来的2倍. 

perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如

下代码示例：

.stage {
    perspective: 600px;
}
以及：
#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

注意：在css3中只有设置了perspective的值元素才会有Z轴，perspective为none元素则没有Z轴(就是2D元素)

transform-style

这个属性比较简单只有两个值flat和preserve-3d。用于指定舞台为2D或3D，默认值flat表示2D舞台，所有子元素2D层面展现。preserve-3d看名字就知道了表示3D

舞台，所有子元素在3D层面展现。注意，在变形元素自身上指定该属性是没有用的，它用于指定舞台，所以要在变形元素的父元素上设置该属性。设定后，所有

子元素共享该舞台。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: #0084bb;
            transform:perspective(1200px) rotateY(45deg);
            transform-style: preserve-3d;
        }
        img{
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
<div class="box">
   <img src="qy.jpg" />
</div>
</body>
</html>

对比下图可以直观的发现加与不加的区别

六、CSS3 新特性之 动画

1. transition 属性是一个简写属性，用于设置四个过渡属性：其实理解transition重要理解，它就是平滑过渡CSS样式

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

transition：all 2s 1s ease

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 定义过渡效果花费的时间。默认是 0。

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

transition-delay 规定过渡效果何时开始。默认是 0。

注意：过渡不能实现从无到有的转换，比如经常有人想要过渡display:none 到 display:block 

时间曲线：

linear 规定以相同速度开始至结束的过渡效果 

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果 

ease-in 规定以慢速开始的过渡效果 

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

2. 动画 @keyframes 规则来创建动画，keyframes规定指定内一个或多个css样式从当前状态更改为新的样式可以取代网页中的动图、flase动画和javaScript

动画是使元素从一种样式逐渐变化为另一种样式的效果，以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同

于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

语法：animation: name time 延迟时间 运动方式   循环次数  反向是否也有动画;

animation：所有动画属性的简写属性

animation-name：规定 @keyframes 动画的名称。

animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function 规定动画的速度曲线。默认是 "ease"

animation-direction 属性定义是否循环交替反向播放动画 normal 正常播放 alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放

animation-delay  规定动画何时开始。默认是 0。

animation-iteration-count ：规定动画被播放的次数。默认是 1，infinite 无限次播放。

animation-play-state:paused

看完以上的总会丢掉一个重要的steps以上w3school网站上给的使用方法，但是漏掉一个很重要的 steps

简单的来说，我们一直使用animation基本都是实现线性渐变的动画如1.位置在固定的时间从起点到终点2.尺寸在固定的时间线性变化 3.颜色的线性改变等等

如果要实现帧动画效果而不是线性的变化就需要引入step这个值了，换句话就是没有过渡的效果，而是一帧帧的变化，一顿一顿的

注意：不管是动画还是视频，我们都应该明白这么一个东西：这个动画叫什么名字，它的播放时长、播放快慢、是否延迟播放、是否无限制播放次数、是否倒放、

是否暂停是否都需要有所改变

下面我们来详细介绍下steps 函数，steps函数指定了一个阶跃函数

css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,...定义了animation-timing-

function后,动画就会按照定义的曲线来执行动画.

但是除了这些值以外,animation-timing-function值还可以是steps(x,startend) 它呢有两个参数，分别是动画分几步完成（这个分几步完成可不是指整个keyframe

指的是每个间距比如0%｛｝50%｛｝0-50% 分为几步）和动画开始的位置，start 第一帧是第一步动画结束，end 第一帧是第一步动画开始

它和之前的几个有什么不一样呢？

如果定义曲线,则动画帧与帧之间会流畅的进行,而定义steps,则表示直接跳跃进行,动画直接从一个帧切换到另一个帧.

举个栗子：通过动画写一个颜色过渡动画，分别是0%{red} 100% {black}如果用之前的动画曲线是先红色，然后从红色可能先变成灰色再一步一步渐变最后到黑

色。要是steps的话呢就直接是红色然后黑色，没有中间过渡那个效果。但是话说回来写动画的目的就是因为它能加上过度动画，所以这个的话大家根据情况来看

选择哪个。

七、终于到了最后一个字体和图标字体了

之前的网站上面的字体必须是用户计算机上面已经安装的字体，不然就不会显示出来，but 这严重影响到了设计师的审美，于是伴随着CSS3，网页设计师可以尽

情的使用任何字体，我们把字体文件包含在网站中，它会自动下载给需要的客户

1. 先去下载：我使用的字体下载地址：http://font.chinaz.com/zhongwenziti.html

2. 安装字体   把下载好的字体文件（AaPrincessPeach.ttf）拷贝到 C:\Windows\Fonts 下

3. 在html页面中使用

<style>       
 @font-face {
        font-family: "fontname";
        src: url("AaPrincessPeach.ttf");
    }
   div{
            font-family: fontname;
}
</style>

扩展了解：如果网站上面有同时有多种字体怎么办？很简单，只需要把导入字体的@font-face复制下就OK啦

图标字体

目前网页上你看到的小图标不一定全部都是雪碧图或者小图，有可能有一些是图标字体。图标字体就是将图标做成一个字体，使用的时候和普通的字体一样，可以

设置字号大小、颜色、透明度等等，都一样一样的。最大的优点就是拥有字体的矢量无失真的特点，同时可以兼容到IE6，并且生成的文件比较小，215个图标的

生成ttf字体文件才41kb

1. 先去下载：我使用的图标字体下载地址：http://www.iconfont.cn/

2. 选择你想要的图标，点击加入购物车，然后都选择完毕后，点击购物车图标

到这步可能大家又会有点晕了就是怎么给了这么多文件，而且后缀名都这么奇怪呢，先来认识下新的后缀名都是干嘛的，然后就好用了

Also看完了就知道为什么给你提供这么多格式了吧，还是因为浏览器兼容问题，也就是说你希望它能兼容更多的浏览器，在用的时候会就填几个格式咯

3. 开始使用

首先在CSS中填写

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1499824504946'); /* IE9*/
  src: url('iconfont.eot?t=1499824504946#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1499824504946') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1499824504946') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1499824504946#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-fengji:before { content: "\e609"; }
.icon-shidu:before { content: "\e60a"; }
.icon-shuitongfa:before { content: "\e60b"; }
.icon-taiyangyu:before { content: "\e60c"; }
.icon-eryanghuatannongdu:before { content: "\e613"; }
<i class="iconfont icon-fengji"></i>

4. 其他网站应用，可以F12看下淘宝首页头部这块，就是用的图标字体

5. 图标字体对比雪碧图？

雪碧图的缺点：1. 高清会失真 2.不方便变化，因为是一个静态的图片无法动态hover变化颜色或者其他效果

而图标字体都完美的解决了上述问题，并且还具备良好的兼容性，同时生成的文件小。但是图标字体也有自己的软肋，不支持多色图标，虽然现在通过svg的方式

也有多色图标，但是浏览器的支持并不是特别好，所以以后在网页布局的时候可以根据情况合理的使用图标字体和雪碧图。

扩展了解下如果想自己做图标字体怎么办？给你一个链接自己顿悟下 http://jingyan.baidu.com/article/9158e000342ba6a25412281f.html

总结一下：这次篇幅有点长，但是却把CSS3中的新特性都展示了出来，有了CSS3确实为我们的开发带来非一般的赶脚，虽然我们现在还在加着一堆我们并不喜欢的前缀才能使用CSS3，但是我想在不远的以后，肯定会把这些讨厌的前缀都去掉，更多的浏览器开发厂商将完美的拥抱CSS3，回顾CSS3之前的历程，从一开始都不支持，到现在的加上前缀部分支持，到以后不加前缀都支持也不会太远。