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

说明：

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头像右上角的讨厌红点的更多相关文章

  1. python小项目之头像右上角加数字

    pillow介绍 一.Image类的属性:1.Format   2.Mode   3.Size    4.Palette    5.Info 二.类的函数:1.New   2.Open   3.Ble ...

  2. CSS卡片右上角标记样式设计

    template <div class="each-one-in-list"> <div class="show-icon">进行中&l ...

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. CSS颜色代码

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  5. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  6. CSS中的颜色问题

    css颜色: CSS 颜色 颜色是通过对红.绿和蓝光的组合来显示的 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十 ...

  7. CSS颜色代码 颜色值 颜色名字大全

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  8. css单位分析、颜色设置与调色板

    CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...

  9. Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册

    头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...

随机推荐

  1. "码代码"微信号今日上线,为互联网同仁提供最前沿咨询

    "码代码"微信号今日上线 关注即有好礼相送 三月,春意浓浓的日子,三月,属于女人的日子,而今天...... “2014年天空成人放送大赏”于5日晚举办颁奖典礼,“年度最佳AV女优” ...

  2. php的一个魔法常亮__DIR__

    我们知道PHP中提供了一个魔术常量(magic constant)__FILE__,用来指向当前执行的PHP脚本.但PHP没有直接提供该脚本所在目录的常量.也就是说如果我们要得到当前PHP脚本所在的目 ...

  3. chosen-bootstrap使用技巧

    1.页面加载完成后,通过js方式设置值,无法有效显示的问题. 解决:先设置值,让后在进行初始化操作. // 设置select选中值 $("#type").val(type); // ...

  4. cron on Centos

    1. crond.service 2. configuration 2.0 format # Example of job definition: # .---------------- minute ...

  5. Vue的模板语法

    基本语法 <body> <script src="vue.js"></script> <div id="app"> ...

  6. 10 Steps To be a senior programmer

    What 软件工程师的职业生涯要历经以下几个阶段:初级.中级,最后才是高级.这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师. Why 得到更多的报酬!因为你的薪水会随着你水平的提高而 ...

  7. 获取minist数据并转换成lmdb

    caffe本身是没有数据集的,但在data目录下有获取数据的一些脚本.MNIST,一个经典的手写数字库,包含60000个训练样本和10000个测试样本,每个样本为28*28大小的黑白图片,手写数字为0 ...

  8. Drop和Truncate与Delete的区别

    1.Drop DROP TABLE test; 删除表test,并释放空间,将test删除的一干二净.(结构也被完全删除) 2.Truncate TRUNCATE test; 删除表test里的内容, ...

  9. 外键，check，索引等，根据ID来检索详细信息

    sql server OBJECTPROPERTY 函数 分类: Sql server2008-11-26 11:11 1562人阅读 评论(0) 收藏 举报 sql serverinsertdele ...

  10. returnFloat_thousand() 以万计数 ，如100，结果是0.01

    function returnFloat_thousand(value){ var value=Math.ceil(Math.round(parseFloat(value)*100)/100)/100 ...