前端技巧集：三步制作小徽章

网页中的小徽章越发多了。下面教大家如何做个小徽章。这是唯品会的雪碧图，作为我们的背景图片。

header.png

1. 做一个图片背景
   制作一个购物袋的背景图标。

.buy-icon {
    display: inline-block;
    width: 15px;
    height: 20px;
    background-image: url(../img/header.png);
    background-repeat: no-repeat;
    background-position: 0 -60px;
}

2. 在buy-icon的div中加上一个小徽标
   制作一个小徽章。颜色、背景和大小如下：

.badge {
    background: #f10180;
    color: #fff;
    text-align: center;
    font-size: 12px;
    border-radius: 40%;
}

3. 将小徽章向右上角移动
   这是关键的一步，在.badge中加入margin使小徽章向右上角移动。

    margin-top:-20%;
    margin-left:40%;

三步完成小徽章简单吧。