.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. 2-SAT问题简述

    前置知识 强连通分量 k-SAT问题 k-SAT问题中的SAT意思就是(stability),也就是适应性问题.本意是给出n个变量,每一个变量有k个状态,并且也给出一些约束条件,要求你求出是否存在每一 ...

  2. 猜想-未做 利用office组件读取excel数据

    ---未实际使用过 用SQL-Server访问Office的Access和Excel http://blog.sina.com.cn/s/blog_964237ea0101532x.html 2007 ...

  3. LightOJ1282

    题目大意: 给出 n 和 k,请你求出 n^k 次方的前三位和后三位. 解题思路: 后三位用快速幂,不加赘述. 求前三位的方法: AC代码: #include <iostream> #in ...

  4. 【c#】Visual Studio 的下载及安装

    “工欲善其事,必先利其器” 这篇博文我们介绍一下如何正确的安装基于c#使用的vs 2017. 1.首先在官网下载Visual Studio,下载地址:https://www.visualstudio. ...

  5. 还不会K8S吗？先从kubeadm开始吧

    目录 1. 准备工作 1.1 机器准备 1.2 系统配置 1.2.1 主机名及域名解析 1.2.2 免密登录 1.2.3 配置yum源 1.2.4 安装必要依赖包 1.2.5 关闭防火墙.SELinu ...

  6. java中的redis常用操作

    https://blog.csdn.net/lixiaoxiong55/article/details/81592800    超详细版 常规操作 public class TestReidsComm ...

  7. 容器技术之Docker数据卷

    前一篇随笔中我们了解了docker的网络相关说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12952616.html:今天我们来聊一聊docker的数据管 ...

  8. Python一键获取日漫Top100榜单电影信息

    最近看到一个 UP 主做的视频,使用可视化动态图,把目前播放量最多的 UP 主一一列出来,结果第一名是哔哩哔哩番剧,第一名的播放量是第二名近 10 倍. B站的番剧数量,也是相对其他平台比较多的,而且 ...

  9. 像宝石一样的Java原子类

    十五年前,多处理器系统是高度专业化的系统,通常耗资数十万美元(其中大多数具有两到四个处理器). 如今,多处理器系统既便宜又丰富,几乎主流的微处理器都内置了对多处理器的支持,很多能够支持数十或数百个处理 ...

  10. MySQL/MariaDB随笔一

    1.yum 安装后先跑一下系统自带的安全脚本,否则数据库很不安全,任何人都可以登录 [root@xixi ~]# mysql_secure_installation NOTE: RUNNING ALL ...