就是这个讨厌的红点，如图：
说明：
1、主要用到position定位；
2、使用border-radius画圆角；
源码：
<!DOCTYPE html><html><head> ???<meta charset="gbk" /> ???<title>test</title> ???<style> ???????.info { ?????????background: rgba(45,171,219,.9); ?????????position:relative;/*设置子元素相对定位*/ ?????????color: white; ?????????text-align: center; ?????????width:40px; ?????????height:40px; ?????????-webkit-border-radius: 50%; ?????????-moz-border-radius: 50%; ?????????border-radius:50%; ?????????display:inline-block; ???????} ???????.info:hover{ ?????????cursor: pointer; ?????????background: rgba(45,171,219,.6); ???????} ????????????????????.info-tip{ ???????????background:rgba(250,60,0,1); ???????????position:absolute;/*根据父元素绝对定位*/ ???????????width:10px; ???????????height:10px; ???????????top:0;/*在父元素的内部的顶部*/ ???????????right:0;/*在父元素的内部的右边*/ ???????????-webkit-border-radius: 50%; ???????????-moz-border-radius: 50%; ???????????border-radius:50%; ???????} ???</style></head><body > ???????<div class="info"> ???????<span class="info-tip"></span> ???</div> ???<div class="info"> ???????<span class="info-tip"></span> ???</div> ???<div class="info"> ???????<span class="info-tip"></span> ???</div></body></html>CSS头像右上角的讨厌红点
原文地址：https://www.cnblogs.com/xmqa/p/8674997.html