CSS头像右上角的讨厌红点

时间：2018-03-30 12:12:09 阅读：935 评论：0 收藏：0 [点我收藏+]

标签：over 相对 poi cursor gbk gpo css 图片 int

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

技术分享图片

说明：

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头像右上角的讨厌红点

标签：over 相对 poi cursor gbk gpo css 图片 int

原文地址：https://www.cnblogs.com/xmqa/p/8674997.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行