画圆形标签的窍门: 圆形是在padding和margin中间同时是padding的内切圆也是margin的外接圆
.circle{
width: 20px;
height: 20px;
display: inline-block;
line-height: 20px;
text-align: center;
padding: 5px;
margin: 5px;
border-radius: 20px;
background-color: darkgrey;
}

  

[css]画圆形标签的更多相关文章

  1. Effective前端3:用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  2. CSS学习笔记一:css 画平面图形

    最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...

  3. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  4. 用CSS画基本图形

    用CSS画基本图形 1.正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 代码如下:   #recta ...

  5. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  6. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  7. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  8. Android_AsyncTaskDemo之QQ记步数(画圆形图片知识)

    今天学习了AsyncTask Android 的异步机制.我简单的实现我的一个小小案例--qq记步数.然后穿插一个画圆形图片的知识点. 由于所学知识有限,目前我计数,还有排名等等我就简单的利用随机数实 ...

  9. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. VMware 完成 27 亿美元的 Pivotal 收购 | 云原生生态周报 Vol. 34

    作者 | 汪萌海.王思宇.李鹏 业界要闻 VMware 完成 27 亿美元的 Pivotal 收购 VMware 在 12 月 30 日宣布,已完成 27 亿美元的 Pivotal 收购,同一天 Pi ...

  2. Arduino_URO端口与AtMega328p引脚对应图

    Arduino微控制器的数字端口和模拟端口与ATMEGA 328芯片引脚的对应关系图如下.标有0~13标号的引脚对应的是数字端口,在0~13前面有符号“~”的引脚对应的端口具有PWM输出功能.标有A0 ...

  3. 【原创】(十六)Linux内存管理之CMA

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  4. Alodi:环境创建从未如此简单

    一个满足你各种想象的快速方便生成临时环境的系统 在『Alodi:为了保密我开发了一个系统』文章中有讲到我们开发了一个系统用来快速生成临时测试环境,短短三个月已有数百个环境被创建,简化了工作,节省了时间 ...

  5. css3让元素自适应高度

    知识点: viewport:可视窗口,也就是浏览器.vw Viewport宽度, 1vw 等于viewport宽度的1%vh Viewport高度, 1vh 等于viewport高的的1% calc( ...

  6. phpstudy nginx设置CORS跨域不起作用的可能解决方法

    今天搞了半天的跨域问题,想通过nginx配置跨域,希望以后本地调试程序都不用为这件事烦心.无非就是设置几个请求头: add_header Access-Control-Allow-Origin *; ...

  7. 用Python爬取了考研吧1000条帖子,原来他们都在讨论这些!

    写在前面 考研在即,想多了解考研er的想法,就是去找学长学姐或者去网上搜索,贴吧就是一个好地方.而借助强大的工具可以快速从网络鱼龙混杂的信息中得到有价值的信息.虽然网上有很多爬取百度贴吧的教程和例子, ...

  8. 【Leetcode 做题学算法周刊】第七期

    首发于微信公众号<前端成长记>,写于 2020.01.15 背景 本文记录刷题过程中的整个思考过程,以供参考.主要内容涵盖: 题目分析设想 编写代码验证 查阅他人解法 思考总结 目录 12 ...

  9. Python CGI apache在windows下安装

    1.首先去下载apache (http://httpd.apache.org/download.cgi)(Apache VC15 binaries and modules download) 2.下载 ...

  10. log4j的xml配置

    主要记录下方便下次查找 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE log4j:conf ...