27.html-凹凸文字、空心文字、精灵图

凹凸文字（示例）：       
        div{
            font-size: 120px;
            background-color: rgb(33,177,104);
            color: rgb(33,177,104);
            font-weight: 700;
        }
        .fa .tu{
            /* 水平阴影位置 垂直阴影位置 模糊距离 阴影颜色 */
            text-shadow: -1px -1px 2px #fff,1px 1px 2px #000;
        }
        .fa .ao{
            text-shadow: -1px -1px 2px #000,1px 1px 2px #fff;
        }
    <yle>
    <div class="fa">
        <span class="tu">我是凸起</span>
        <span class="ao">我是凹进</span>
    </div>

空心文字： 
        span{
            /* 伪空心元素，与背景色有关*/
            font-size: 200px;
            font-weight: 700;
            /* 文字的填充色 */
            -webkit-text-fill-color: #fff;
            /* 文字描边颜色 */
            -webkit-text-stroke-color: blueviolet;
            /* 文字描边宽度 */
            -webkit-text-stroke-width: 10px;
        }

精灵图：
      为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图    
      查到目标图标大小，设置宽高，通过position调整位置，找到目标图标 
      <!--精灵图:页面上会用到很多小图标，把这些小图标放在一张大图片上显示，需要用到的时候通过背景的位置来展示每一个小图标 目的在于优化性能-->