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

说明：

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. CentOS 6.4 php-fpm 添加service 添加平滑启动/重启

    nginx通过FastCGI运行PHP比Apache包含PHP环境有明显的优势,最近有消息称,PHP5.4将很有可能把PHP-FPM补丁包含在内核里,nginx服务器平台上运行PHP将更加轻松,下面我 ...

  2. Proc datasets

    作用:控制数据集.Datasets 过程运行结果不输出,结果只有在日志里才能看到. 基本语法: proc datasets lib=work; quit; 用法: 1. 更改数据集 proc data ...

  3. CAD参数绘制圆弧（com接口）

    在CAD设计时,需要绘制圆弧,用户可以在图面点圆弧起点,圆弧上的一点和圆弧的终点,这样就绘制出圆弧. 主要用到函数说明: _DMxDrawX::DrawArc2 由圆弧上的三点绘制一个圆弧.详细说明如 ...

  4. PHP 下基于 php-amqp 扩展的 RabbitMQ 简单用例 (二) -- Topic Exchange 和 Fanout Exchange

    Topic Exchange 此模式下交换机,在推送消息时, 会根据消息的主题词和队列的主题词决定将消息推送到哪个队列. 交换机只会为 Queue 分发符合其指定的主题的消息. 向交换机发送消息时,消 ...

  5. eclipse 的开发环境配置

    一.基础环境设置 1.jdk下载配置 2.JRE下载配置 3.Eclipse下载 4.Eclipde 与JRE配置,见图 二.PHP环境设置 1.apache + PHP 配置. 详见随笔文章:Ecl ...

  6. java关于时间的相关操作

    /** * 获取当天时间零点 * @return */ public Date gettoday(){ SimpleDateFormat sdf = new SimpleDateFormat(&quo ...

  7. 诊断：AWR快照停止自动采集

    11.2.0.4数据库中,MMON进程,有时候由于一些莫名其妙的原因挂掉,接下来AWR的快照也就无法正常自动生成.MMON进程应该自动重启,却并没有自动被启动. 那么我们有可能是遇到了bug Bug ...

  8. VM虚拟机中CentOS6.4操作系统安装一

    在 VMware中鼠标单击“编辑虚拟机设置”,在弹出的“虚拟机设置”对话框中的“硬件”标签中选择“CD/DVD(IDE)”,然后在右侧的“CD /DVD(IDE)”连接选项中选择“使用ISO映像文件” ...

  9. laravel学习笔记3--高级

    一.artisan 1.基本使用: 1.1.查看基本命令: php artisan 1.2.查看具体命名的使用: php artisan help migrate 1.3.创建控制器: php art ...

  10. Java 文件操作大集合

    package com.sess.hny.sys.fileserver; import java.io.BufferedInputStream;import java.io.BufferedOutpu ...