前端基础复习--19 CSS3提供了扩展背景样式？CSS3渐变？字体图标？

1. CSS3提供了扩展背景样式？⭐️跟背景色无关

background: url('./img/list_photo.png') no-repeat;
用background写 别用background-image，这样写不了no-repeat

    background-size : 背景图的尺寸大小
        cover : 覆盖
        contain : 包含 
    background-origin : 背景图的填充位置
        ⭐️这是默认的位置padding-box
        border-box
        content-box
    background-clip : 背景图的裁切方式
        padding-box 
        border-box (默认) 
        content-box 

    注：复合样式的时候，第一个是位置，第二个是裁切

2. CSS3渐变？
    1. 线性渐变 -> linear-gradient是值，需要添加到background-image属性上

    注：⭐️⭐️⭐️渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。

     background-image: linear-gradient(red, blue, yellow);
     background-image: linear-gradient(to right bottom, red, blue, yellow);
    background-image: linear-gradient(45deg, red 15%, blue 30%, yellow 75%);
     一个容器内添加两种颜色：
            background-image: linear-gradient(45deg, red 50%, yellow 50%);

    2. 径向渐变 -> radial-gradient 

3. 字体图标？

    font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
 
      好处：
          1.可以非常方便的改变大小和颜色
                font-size    color
          2.放大后不会失真
          3.减少请求次数和提高加载速度
          4.简化网页布局
        5.减少设计师和前端工程师的工作量
        http://www.iconfont.cn
        6.可使用计算机没有提供的字体

    使用：
        @font-face语法 注意156集怎么建iconfont项目
        使用彩色图标要把js也拷贝 ⭐️一定要以symbol的方式引入
        黑白的图标用font class方式引入

            像.woff等文件都是做兼容平台处理的, mac、linux等。