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

说明：

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. spring jdbc 批处理插入主健重复的数据

    1.有事务:当调用spring jdbc 的批处理的时候,在实现层加入事物,只要有插入异常的数据,整个批处理操作都会回滚.事务保证操作的原子性. 2.无事务:当没有事务的时候,批处理插入数据的时候,若 ...

  2. OC中文件读取类(NSFileHandle)介绍和常用使用方法

    NSFileHandle 1.NSFileManager类主要对于文件的操作(删除,修改,移动,赋值等等) //判断是否有 tagetPath 文件路径,没有就创建 NSFileManager *fi ...

  3. Node.js——流的下载

    https://cnodejs.org/topic/59d8f43b2543cb3368b1623e var request = require('request'); var fs = requir ...

  4. jquery日期控件+时分秒

    因为项目需要,一些时间上的查询要精确的时分.先看下效果图吧. 所需要的js 跟css 文件 jsp://特别注意引入的先后顺序 <link rel="stylesheet" ...

  5. MVC学习（一）

    http://www.cnblogs.com/QLeelulu/archive/2008/09/30/1302462.html

  6. iTOP-6818开发板设置NFS共享目录的实现

    NFS 共享目录的制作过程.主要分为两个步骤:1.搭建 NFS 服务器2.配置内核. NFS 是 Network FileSystem 的缩写,是由 SUN 公司研制的 UNIX 表示层协议(pres ...

  7. （转）hibernate-5.0.7+struts-2.3.24+spring-4.2.4三大框架整合

    http://blog.csdn.net/yerenyuan_pku/article/details/70040220 SSH框架整合思想 三大框架应用在JavaEE三层结构,每一层都用到了不同的框架 ...

  8. ZooKeeper系列（四）

    一.配置服务 配置服务是分布式应用所需要的基本服务之一,它使集群中的机器可以共享配置信息中那些公共的部分.简单地说,ZooKeeper可以作为一个具有高可用性的配置存储器,允许分布式应用的参与者检索和 ...

  9. swift 与 @objc

    Objective-C entry points https://github.com/apple/swift-evolution/blob/master/proposals/0160-objc-in ...

  10. Eureka 整理

    服务治理:(该模块也可以使用集群) 该模块主要负责完成微服务架构中的服务治理功能. 1.构建服务注册中心. 每个服务单元需要向注册中心登记自己提供的服务. 2.服务注册与服务发现. 服务之间的调用不再 ...