画圆形标签的窍门: 圆形是在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. 反射 API基本代码测试

    ReflectBean.java package com.xiaojian.basics.reflect; /** * 使用反射的测试类 */ public class ReflectBean { / ...

  2. java小项目之:象棋,羡慕你们有对象的!

    象棋,是我国传统棋类益智游戏,在中国有着悠久的历史,属于二人对抗性游戏的一种,由于用具简单,趣味性强,成为流行极为广泛的棋艺活动.中国象棋是中国棋文化也是中华民族的文化瑰宝. 象棋还有很多口诀,这是最 ...

  3. 通过例子学习C++(三)最大公约数,并知其然

    本文是通过例子学习C++的第三篇,通过这个例子可以快速入门c++相关的语法. 题目要求:输入两个整数,求其大公约数. 解答方法一:两个数的最大公约数,是这两个数中的小数,或者是这2个数的公约数中的最大 ...

  4. Eclipse中安装Jetty服务器

    1. 在eclipse中安装jetty适配器 方法一: (1) 打开 Windows -> Preference -> Server -> Runtime Environment , ...

  5. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  6. CI框架获取post和get参数_CodeIgniter使用心得

    请参考:CI文档的输入类部分: $this->input->post()$this->input->get() -------------------------------- ...

  7. TensorFlow——学习率衰减的使用方法

    在TensorFlow的优化器中, 都要设置学习率.学习率是在精度和速度之间找到一个平衡: 学习率太大,训练的速度会有提升,但是结果的精度不够,而且还可能导致不能收敛出现震荡的情况. 学习率太小,精度 ...

  8. springboot2 + grpc + k8s + istio

    项目情况说明: ubuntu - 16.04 springboot - 2.2.2.RELEASE mysql - 5.7 mongodb - 4.0.14 redis - 3.0.6 grpc -  ...

  9. Spring Boot2 系列教程 (十七) | 整合 WebSocket 实现聊天室

    微信公众号:一个优秀的废人.如有问题,请后台留言,反正我也不会听. 前言 昨天那篇介绍了 WebSocket 实现广播,也即服务器端有消息时,将消息发送给所有连接了当前 endpoint 的浏览器.但 ...

  10. Linux.vim.多行复制、删除、剪切

    复制: //单行复制+粘贴 yy + p:复制光标所处当前行, 敲p粘贴在光标处. //多行复制+粘贴 n + yy + p:复制光标所在行起以下n行(含当前行), 敲yy复制光标所处当前行, 敲p粘 ...