HTML/CSS: 如何制作未读信息图标

最近公司项目中涉及到制作通讯界面中未读信息的带数字的红色圆点图标。

 

拿我目前的博客头像图片为例（其实就是谷歌图片中粗略挑了一张顺眼的图片），效果图如下：

HTML代码如下：

<img id="picture" src="PATH_OF_PICTURE">
<div id="badge">1</div>

CSS代码如下：

#picture {
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
}
#badge {
    width: 20px;
    height: 20px;
    line-height: 20px;  /* 数值与height相同，使数字垂直居中 */
    text-align: center;  ／* 使数字水平居中 *／
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;  ／* 使正方形变圆形，矩形变椭圆形 */
    position: relative;
    bottom: 60px;
    left: 90px;
}

 

CSS中的各种数值大小仅是例子而已，除了我标示在注释中的需要值得注意的地方外，这个例子是圆点始终为圆形且大小不变的情况，但数字一旦超过一位数，那么圆形就不能满足需求了，一般我们所见的图标会随着字符长度的变化而变化的，如下图：

HTML代码如下：

<img id="picture" src="PATH_OF_PICTURE">
<span id="badge">1000</span> <!- 把div改成span，不然宽度会占据整行-->

CSS代码如下：

#picture {
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
}
#badge {
    padding: 2px 5px;  /* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 */
    line-height: 20px;
    text-align: center;
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    position: relative;
    bottom: 45px;
    left: -20px;
}

但是这样的代码存在一个问题，当把数字再变回成个位数时，红点的位置就过于偏左了。

所以一般会给数字设置一个上限，如果超过那个数字，就在那个数字后边加上➕表示。效果如下：