用外部html圆形里装数字,如何使用CSS用圆圈包围数字？

这里我的解决方案 - 这很容易地允许不同大小和颜色关系进入一个用于编辑控制的CMS。 IE降级为正方形。

HTML：

Fashion & Beauty

CSS：

.circular-label {

overflow: hidden;

z-index: 100;

vertical-align: middle;

font-size: 11px;

-webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);

-moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);

box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);

}

.label-inner {

width: 85%;

height: 85%;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

border: 2px dotted white;

vertical-align: middle;

margin: auto;

top: 5%;

position: relative;

overflow: hidden;

}

.label-inner > span {

display: table;

text-align: center;

vertical-align: middle;

font-weight: bold;

text-transform: uppercase;

width: 100%;

position: absolute;

margin: auto;

margin-top: 38%;

font-family:'ProximaNovaLtSemibold';

font-size: 13px;

line-height: 1.0em;

}

.circular-label.label-size-large {

width: 110px;

height: 110px;

-moz-border-radius: 55px;

-webkit-border-radius: 55px;

border-radius: 55px;

margin-top:-55px;

}

.circular-label.label-size-med {

width: 76px;

height: 76px;

-moz-border-radius: 38px;

-webkit-border-radius: 38px;

border-radius: 38px;

margin-top:-38px;

}

.circular-label.label-size-med .label-inner > span {

margin-top: 33%;

}

.circular-label.label-size-small {

width: 66px;

height: 66px;

-moz-border-radius: 33px;

-webkit-border-radius: 33px;

border-radius: 33px;

margin-top:-33px;

}

这不是太难看如何做到这一点。更大的问题是，是否有可能使圆形标尺的尺寸达到内容。

目前我不认为这是可能的。任何人？

用外部html圆形里装数字,如何使用CSS用圆圈包围数字？相关推荐

Pandora 的魔盒里装了什么？
Github 开源地址 : github.com/AlanCheen/P- 在古希腊的神话中 Pandora 是世界上第一个女人,一个 all-gifted 的女人(具有一切天赋的女人),而潘多拉的魔 ...
SAP MM 外部采购流程里的如同鸡肋一样的Advanced Returns Management功能
SAP MM 外部采购流程里的如同鸡肋一样的Advanced Returns Management功能文章中的配置界面和单据流界面都是基于SAP S4HANA 1909系统. Part I: 外部采 ...
SAP MM 外部采购流程里的Advanced Return Management
SAP MM 外部采购流程里的Advanced Return Management 本文简要介绍外部采购订单中高级退货管理功能. 1,采购订单单据类型 NB2, 2,交货单类型的设置 3, BP主数据 ...
BigDecimal的用法详解(保留两位小数,四舍五入,数字格式化，科学计数法转数字，数字里的逗号处理）
一.简介 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更 ...
cli vue 外部js 引入文件_javascript - vue cli构建的项目中，vue组件里怎么引入外部js文件里的方法...
问题我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...
【C++代码】约瑟夫环问题：0,1,……,n-1这n个数字排成一个圆圈，从数字0开始，每次从这个圆圈里删除第m个数字。求出这个圆圈里剩下的最后一个数字。
问题描述:0,1,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字. 这是力扣上的一道题.我的思路: ①首先想到的是用循环链表,每次向后遍历 ...
iphone6安装android,在iPhone里装了真 Android系统这事情已经很神奇了
原标题:在iPhone里装了真 Android系统这事情已经很神奇了现在,在 Windows 系统中安装 macOS 已经不是什么稀奇的事情,在 Mac 中安装 Windows 虽然有点掉格,但也 ...
visio和word中插入带圆圈的数字符号，word表格里画斜线
一 visio和word中插入带圆圈的数字符号 1 菜单中选择插入---->符号: 2 字体选宋体,字迹选带括号的字母数字. 二 word表格里画斜线 1 光标放置要绘制斜线的单元格: 2 ...
我倒要看看你葫芦里装的是什么事药
我倒要看看你葫芦里装的是什么B Click me 我倒要看看你葫芦里装的是什么B UVA11388 UVA11889 UVA10943 UVA10780 UVA10892 11752 UVA11076 ...

用外部html圆形里装数字,如何使用CSS用圆圈包围数字？

用外部html圆形里装数字,如何使用CSS用圆圈包围数字？相关推荐

最新文章

热门文章