.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. zz MySQL redo log及recover过程浅析

    原作地址:http://www.cnblogs.com/liuhao/p/3714012.html 写在前面:作者水平有限,欢迎不吝赐教,一切以最新源码为准. InnoDB redo log 首先介绍 ...

  2. PAT-1133 Splitting A Linked List（链表分解）

    Cutting an integer means to cut a K digits long integer Z into two integers of (K/2) digits long int ...

  3. Text Reverse（hdu1062）

    输入方式:先输入整数,再循环输入字符串. 思考:字符串中有空格.那么要在字符串大循环输入前,首先,用"getchar()"函数读取scanf_s()函数缓冲区的空格或者空行或者换行 ...

  4. [PHP]用PHP自己写一个基于zoomeye的api(偷懒必备quq)

    0x01 起因 因为手速慢,漏洞刷不过别人,一个个手补确实慢,所以想自己写一个api,一键抓取zoomeye的20页,然后就可以打批量了 ovo(真是太妙了!) 0x02 动工       1.抓包做 ...

  5. java,netcore和nodejs api性能测试

    一. 前言 作为有点经验的码农,现在退休在家带孩子.闲来无事,想对使用过的框架(如果写语言容易引战,php是世界上最好的语言)做一个性能测试. 二. 背景 由于毕业后刚开始接触的编程语言是C#, 从a ...

  6. Verilog代码和FPGA硬件的映射关系(一)

    代码和硬件之间的映射关系是一个很奇妙的过程,也展现出人类的智慧.单片机内部的硬件结构都是固定的,无法改变,我们通过代码操作着寄存器的读写,来执行各种复杂的任务.FPGA的硬件结构并不像单片机一样是固定 ...

  7. MySQL性能分析（Explain）

    更多知识,请移步我的小破站:http://hellofriend.top 1. 概述 使用EXPLAIN关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的.分析你的查 ...

  8. 《机器学习_09_01_决策树_ID3与C4.5》

    简介 先看一个例子,某银行是否给用户放贷的判断规则集如下: if 年龄==青年: if 有工作==是: if 信贷情况==非常好: 放 else: 不放 else: if 有自己的房子==是: if ...

  9. 前端基础进阶（十四）：es6常用基础合集

    在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得高兴的是,如果你熟悉 ...

  10. 【Ubuntu】Ubuntu18.04通过重装系统成功安装显卡驱动

    0. 前言 前面用了一天的时间来解决Ubuntu安装显卡驱动出现的用户输入密码登录后出现的紫屏.循环登录的问题,过程可阅读“[Ubuntu]Ubuntu系统启动过程中,输入用户名与密码后登录一直卡在紫 ...