CSS头像右上角的讨厌红点

时间：2018-03-30 11:58:07 阅读：260 评论：0 收藏：0 [点我收藏+]

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

技术分享图片

说明：

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)