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

说明：

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. redis-cli 工具--raw参数的作用

    最近阅读了以redis官网关于--raw参数的解释,其功能有两个: 1.按数据原有格式打印数据,不展示额外的类型信息 例如:使用命令发送方式(redis在使用时有命令发送方式和交互方式两种)创建一个k ...

  2. HTML标签的分类

    html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素.常用的块状元素有:<div>.<p>.<h1>...<h6>.<o ...

  3. 【译】x86程序员手册32-9.4 中断描述符表

    9.4 Interrupt Descriptor Table 中断描述符表 The interrupt descriptor table (IDT) associates each interrupt ...

  4. fabric的安装

    https://blog.csdn.net/lepton126/article/details/79148027

  5. 08CSS边框边距

    CSS边框边距 边框样式——border-style border-top-style border-bottom-style border-left-style border-right-style ...

  6. 【原】tcpdump命令

    1.常用参数总结 tcpdump tcpdump -i  (网卡) tcpdump -nn  (数字的方式显示IP和端口.一个n是ip) tcpdump -c x   (抓包数量,x为数字) tcpd ...

  7. [转载]C++、C#写的WebService相互调用

    [转载]C++.C#写的WebService相互调用   首先感谢永和兄提供C++的WebService服务器端及客户端,并且陪我一起熬夜:然后是火石和我做接口的兄弟,虽然都不知道你叫什么,如果没有你 ...

  8. 笔试算法题（09）：查找指定和值的两个数 & 构造BST镜像树

    出题:输入一个已经升序排序的数组和一个数字:要求在数组中查找两个数,这两个数的和正好等于输入的那个数字,输出任意一对数字就可以,要求时间复杂度是O(n): 分析:对于升序排序的数组{…i…j…k…m… ...

  9. Linux环境下验证码不显示F12报500

     前言: 项目之前部署在linux系统上进行测试,今天重新部署的时候,重启了tomcat然后部署新的版本项目,结果登录页面验证码不显示,在浏览器F12页面显示的是500错误.网上查了很多方法,都没效果 ...

  10. node new Buffer()详解

    new Buffer(size) size {Number} 分配一个 size 字节大小的新 Buffer.size 必须小于等于 require('buffer').kMaxLength(在64位 ...