CSS头像右上角的讨厌红点-优快云博客

本文介绍如何使用CSS实现带有红色提示圆点的悬浮信息图标。通过position定位和border-radius属性绘制圆形，适用于网页设计中作为通知或状态指示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

就是这个讨厌的红点，如图：

说明：

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>