.circle {

    display: inline-block;

    width: 12px;

    height: 12px;

}

.circle:after {

    content: '';

    margin: 3px;

    display: table;

    width: 6px;

    height: 6px;

    background: #fff;

    border-radius: 50%;

}
Html: 我的是一个<i class="circle"></i>圆点

效果：

纯CSS如何实现状态圆点的更多相关文章

  1. 纯CSS实现小圆点和三角形图案

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  3. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  4. 10分钟使用纯css实现完整的响应式导航菜单栏的效果

    在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...

  5. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  6. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  7. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  8. 黑科技：纯CSS定制文本省略

    作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...

  9. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

随机推荐

  1. Django之ORM配置与单表操作

    ORM数据库操作流程: 1.    配置数据库(项目同名包中settings.py和__init__.py) 2.    定义类(app包中models.py),执行建表命令(Tools---> ...

  2. python 串口 透传

    python正常情况通过串口 serial  传输数据的时候,都是以字符串的形式发送的 str = ‘abcd’ ser.write(str.encode())#直接发送str报错,需要发送byte类 ...

  3. Flexible 应用

    Flexibl.js 为我们做了一项工作,媒体查询工作,节约了许多操作 举个例子,移动端的页面设计稿是750px,我们自己换算rem单位,比如我想把屏幕划分为15等份,我就750/15=50,然后用所 ...

  4. 快服务常见TOP3审核雷区，再不过审就要崩溃啦！

    仰天大笑出门去,审核提交很神气. 垂死病中惊坐起,突然驳回伤不起. 江州司马青衫湿,重新修改苦自知. 梦里花落知多少,回复马上就改好. 审批被驳回可能是最常见的令开发者头大的问题了,明明看起来&quo ...

  5. Python的多线程锁跟队列

    一.互斥锁: 1.线程同步能够保证多个线程安全访问竞争资源,最简单的同步机制是引入互斥锁. 2.互斥锁为资源引入一个状态:锁定.非锁定 3.某个线程要更改共享数据是,先将其锁定.此时资源的状态为锁定, ...

  6. EF用导航熟悉遍历从表时，删除主表出错

    var entitys= Repository.Table.Where(a => ids.Contains(a.UUID)).ToList(); entitys.ForEach(a => ...

  7. 用非常硬核的JAVA序列化手段实现对象流的持久化保存

    目录 背景 对象流的概念 对象流实例 引入一张组织结构图 定义组织架构图的类 类的完整结构 用对象流保存组织架构的对象信息 核心代码 用对象流读取文件并输出 核心代码 总结 背景 在OOP(面向对象编 ...

  8. MySQL/MariaDB随笔二

    mariaDB的二进制安装:系统版本和MariaDB版本 [root@ ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@ ~ ...

  9. [JavaWeb基础] 026.JAVA中使用Axis搭建webservice-环境搭建（一）

    在实际的项目开发过程中,我们经常会使用第三方交互,特别是在前后端语言不一致的情况下,相信webservice这个第三方控件大家都清楚.后面会慢慢带大家来学习它的使用方式,下面就先讲讲它的工具搭建. 一 ...

  10. Python 每日一练(5)

    引言 Python每日一练又开始啦,今天的专题和Excel有关,主要是实现将txt文本中数据写入到Excel中,说来也巧,今天刚好学校要更新各团支部的人员信息,就借此直接把事情做了 主要对于三种数据类 ...