红色小圆点消息提示实现

项目地址
demo

前言

本司突然多了个需求，要在消息按钮右上角加个类似手机应用小圆点消息提示。就下面这货。

正文

第一想法就是定高，靠内容 撑宽度。最小宽度和高度一致。

        .tip {
            min-width: 20px;
            height: 20px;
            background: red;
            box-sizing: border-box;//必须是border-box，自行体会
            color: white;
            font-size: 10px;
            text-align: center;
            line-height: 20px;
            padding: 0 5px;
            border-radius: 10px;
            display: inline-block;//肯定是inline-block，因为行内元素宽度auto呀
        }

后记

为什么会记录这个呢，因为我居然还想了下，实在不应该。意味着css居然还不是熟的能随意，自勉！！！