CSS头像右上角的讨厌红点

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

说明：

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>

 

posted @ 2018-03-30 10:56  迢迢  阅读(1205)  评论(0)  编辑  收藏  举报