背景裁切

   *{
            padding: 0;
            margin: 0;
        }
        /*提升移动端响应区域的大小*/
        a{
            width: 50px;
            height: 50px;
            display: block;
            background-color: #ddd;
            margin:100px auto;
            box-sizing: border-box;
            
            background-image: url("../images/sprites.png");
            /*设置背景偏移，参照background-origin原点，这个原点默认在容器的左上角*/
            background-position: -20px 0;

            /*添加padding*/
            padding:14px;
            /*设置背景坐标的原点
            border-box:从border的位置开始填充背景，会与border重叠
            padding-box:从padding的位置开始填充背景，会与padding重叠
            content-box:从内容的位置开始填充背景*/
            background-origin: content-box;
            /*设置内容的裁切:设置的是裁切，控制的是显示
            border-box:其实是显示border及以内的内容
            padding-box:其实是显示padding及以内的内容
            content-box:其实是显示content及以内的内容*/
            background-clip: content-box;
        }