CSS3 渐变

渐变的例子在日常生活中出现的很广泛，抬头看一看云层中的太阳或者月亮，从亮到周围的不亮部分就是一个渐变过程。

CSS3中引入了渐变的例子，而且可以用渐变来替代元素的背景图片，之前通常采用静态的PNG渐变背景图片，但是静态的背景图片在调整大小的时候，很难做到动态效果。

CSS的渐变有两种，线性渐变和径向渐变。线性渐变需要指定一个方向，开始和结束的颜色，就可以进行渐变。而径向渐变就不是沿着固定的轨迹，比较复杂。

线性渐变

先看一个线性渐变的例子：

div {
    margin: 100px auto;
    height: 400px;
    width: 400px;
    background-image: linear-gradient(90deg,orange,yellow);
}

可以看到DIV的背景从下部的橙色变成顶部的黄色。这是一个线性渐变

首先渐变是用于background-image属性的，用于设置背景渐变。

第一个参数是角度，0表示从下往上，90deg表示从左到右，可以设置负数。还可以用关键词但是兼容性不太好，不如直接设置角度。

之后是颜色参数，这里是给出了两个颜色，表示终点和起点，实际可以给出一组颜色，会依次过渡。

实际使用中，结合边框，圆角等可以作出很漂亮的背景图片和整体感。

径向渐变

与线性渐变相同，径向渐变也是作为背景的属性出现的。径向渐变的参数要复杂一些。写法是：

radial-gradient size shape at position, colors

size表示径向渐变的结束位置大小，可以设置为具体值，如果是椭圆可以设置为两个值，省略则默认为farthest-corner，有几个关键词：
- closest-side：从圆心到离圆心最近的边
- closest-corner：到最近的角
- farthest-side：到最远的边
- farthest-corner：到最远的角
shape表示径向渐变的形状，主要两个值，circle 和 ellipse，前者表示圆，后者表示椭圆。如果是椭圆，前边的size部分如果使用关键字会由浏览器自动计算，设置成两个不同的值可以手动控制。
position用来定义圆心位置，类似于background-position，确定渐变开始的中心位置，默认为center，可以用像素和百分比以及TRBL关键字
颜色组如果只指定一个颜色，就是结束颜色，如果指定多个颜色就是和线性渐变的颜色组类似。

径向渐变单看参数比较难理解，通过一个例子来看一下：

div1 {
    margin: 100px auto;
    height: 700px;
    width: 700px;
    background-image: radial-gradient(farthest-corner circle at 150px 100px,yellow,red);
    }

div2 {
    margin: 100px auto;
    height: 700px;
    width: 700px;
    background-image: radial-gradient(500px 700px ellipse at 150px 100px,yellow,red);

    }

div1的例子采用了一个圆形渐变，将圆形的中心位置定在相对左上角150px，100px的地方，从黄色渐变到红色，距离是到最远的角落。

div2的例子采用了具体设置一个椭圆渐变的范围和中心。这两个例子都可以手工修改一下各个属性，就能体会到渐变的好处了。

CSS3 自定义字体

浏览器渲染的字体文件，其实是一种矢量图形，也就是描述了一个字的关系，所以可以自由的设置字体的大小，放大也不会模糊和失真。

既然是矢量图片，能想到引入自己的矢量图片，让浏览器将这种图片作为和字体一样的资源进行渲染，这样就可以任意更改其所有像字体属性一样的样式，比使用图片方便太多。

实际上这种效果已经广泛的应用于图标字体上，在各大网站上都经常能够遇到，在学习Bootstrap的时候学到的font-awesome就是通过CSS3的自定义字体实现的。

CSS3的自定义字体用 @font-face 来进行定义。该属性已经得到了浏览器的广泛支持。

@font-face的语法规范如下：

    @font-face {
        font-family: font-name;
        src:URL[format];
        font-weight: weight;
        font-style: style;
        ...
    }

其中的font-family指的是给该字体所起的名字，可以任意取。取了名字之后该字体就可以在其他地方引用。

src表示自定义的字体文件的存放路径，可以是绝对路径或者相对路径。其后跟的format是协助浏览器识别字体的属性，主要有truetype,opentype,truetype-aat,embedded-opentype,avg等，一般也可以不加。

每行src可以定义一个来源，还可以写多行src定义多个来源，浏览器如果找不到第一个来源就会接下去继续寻找。

后边的属性就是控制字体的样式和斜体，还有其他的字体样式都可以使用。对于图标字体由于经常和i标签搭配使用，会通过font-style:normal让其恢复竖直显示。

常用图标字体

互联网上有很多图标字体，其中有一些是免费的，还得到了广泛的使用。来看两个经常使用的图标字体

Font Awesome

Font Awesome是一套很好的图标字体库。

其使用方法也非常简单，将文件夹放入站点下，然后导入CSS文件，之后用带特殊类名的i标签即可插入图标。

不单独使用的话，配合Bootstrap使用也非常方便。

IcoMoon

IcoMoon是一个非常全面的图标库，很多大型网站都采用该图标库中的内容。

其使用方法是：

到官方网站打开右上角的IcoMoon App
在其中选择需要的图标，还可以通过最上边按钮的Edit 来编辑方向和缩放。
选择好所有需要的图标之后，点右下角的Generate Font
此时会进入一个新的页面，列出了所有的图标以及代码对应的粘贴内容，点击右下角的Download下载压缩包
解压后将fonts文件放到自己的web站点目录下。打开style.css，将其中的@font-face部分复制到自己的CSS文件中，修改其中的文件路径
在需要使用图标的地方，将对应的图标的那个特殊符号从demo.html中粘贴到一个span标签中，然后为span标签设置字体为icomoon字体即可显示图标

其他还有很多字体网站和矢量图网站，使用方法与上边这两种大同小异。记得今后在遇到图标尤其是现在网站流行的输入框内图标的时候，先到图标网站上来找风格统一的图标字体。实在不行再考虑用图标图片。