红色小圆点消息提示实现

项目地址
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居然还不是熟的能随意，自勉！！！