本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
说明：
1、主要用到position定位；
2、使用border-radius画圆角；
源码：
html>
test
.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%;
}
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
