就是这个讨厌的红点，如图：
说明：
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>
原文地址：https://www.cnblogs.com/xmqa/p/8674997.html
时间： 2024-10-24 20:48:44