前言
本司突然多了个需求，要在消息按钮右上角加个类似手机应用小圆点消息提示。就下面这货。
image.png
正文
第一想法就是定高，靠内容 撑宽度。最小宽度和高度一致。
.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居然还不是熟的能随意，自勉！！！
网友评论