字体图标//文字阴影//盒子阴影//浏览器前缀//遮罩//倒影//模糊

1. 字体图标

font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。

比如：你可以想象成一个小图片，其实它不是图片，而是一个字。


  好处：
  	1.可以非常方便的改变大小和颜色
        font-size:40px;  color:red;
  	2.放大后不会失真

  	3.减少请求次数和提高加载速度
        
  	4.简化网页布局
        因为字体图标就是一个内联的元素，所以左右布局非常简单
    5.减少设计师和前端工程师的工作量

        用第三方库：www.iconfont.cn

        animate.css库？

    6.可使用计算机没有提供的字体。

字体图标怎么用？

    @font-face{}

    所有的自定义的字体都会放到一个文件中： xxx.svg
        .eot  .woff  .css  .ttf这些文件主要是用来适配不同的环境或操作系统。

iconfont网站怎么用？
    1. 注册账号，创建项目
    2. 选择要用的图标，添加到对应的项目中。
    3. 从项目进行下载
    4. 按照demo.html中的步骤去使用
        1. 把iconfont.css文件引入到html页面里.
        2. 写对应的class="iconfont xxxxx"

自定义字体图标
    https://icomoon.io/app : 在线生成字体图标。

2. 文字阴影

text-shadow:  x  y   blur  color  多阴影

注：默认情况下，阴影的颜色跟文字的颜色相同。

3. 盒子阴影

box-shadow:   x   y   blur( 模糊值)   spread(范围)  color
    inset : 内阴影  outset(默认值：外阴影 , 写上outset不会生效，不写就是外阴影)
    多阴影

注：默认盒子的阴影就是黑色。

4. 浏览器前缀

浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。
 safari    -webkit-
chrome  -webkit-
ie  -ms-
firefox -moz-
opear -o-

5. 遮罩

mask： url   repeat  x  y   w   h  多遮罩

注：需要在服务器环境下，之前通过右键打开方式都是本地打开。
注：如何在服务器环境下打开这个页面，下载插件：live server

6. 倒影

box-reflect： above（上）below（下）left（左）right  （右） 距离  遮罩 | 渐变
注：渐变必须是不透明渐变到透明

扩展：利用scale为-1实现翻转。

7. 模糊

filter:blur() : 值越大越模糊。