我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
当前回答
下面是JSFiddle的演示和代码片段:
/* Creating a number within a circle using CSS */ .numberCircle { font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif; display: inline-block; color: #fff; text-align: center; line-height: 0px; border-radius: 50%; font-size: 12px; min-width: 38px; min-height: 38px; } .numberCircle span { display: inline-block; padding-top: 50%; padding-bottom: 50%; margin-left: 1px; margin-right: 1px; } /* Some Back Ground Colors */ .clrGreen { background: #51a529; } .clrRose { background: #e6568b; } .clrOrange { background: #ec8234; } .clrBlueciel { background: #21adfc; } .clrMauve { background: #7b5d99; } <span class="numberCircle clrGreen"><span>8</span></span> <span class="numberCircle clrRose"><span>80</span></span> <span class="numberCircle clrOrange"><span>800</span></span> <span class="numberCircle clrMauve"><span>8000</span></span>
其他回答
最简单的方法是使用bootstrap和badge类
<span class="badge">1</span>
如果是20或更低,你可以直接使用unicode字符①②…⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
你用一个标准的方块,那是一个正方形
这是css3的特性,它不是很受支持,你可以依靠firefox和safari。
.circle { 宽度:10 em; 高度:10 em; -webkit-border-radius: 5 em; -moz-border-radius: 5 em; 边框:1px纯黑色; } < div class = "圆" > < span > 1234 < / span > < / div >
对于0到99的数字来说,这样做是可行的:
.circle { 边框:0.1em纯灰色; 这个特性:100%; 高度:2 em; 宽:2 em; text-align:中心; } .circle p { margin-top: 0.10 em; 字体大小:1.5 em; 粗细:大胆的; 字体类型:无衬线; 颜色:灰色; } 身体< > < div class = "圆" > < p > < / p > 30 < / div > 身体< / >
三十点的答案是对的,但少了一点。你需要添加位置:相对,如果你想在圆中有居中值,还包括不同范围的数字。 例如123;
HTML:
< div级30 =“numberCircle > < / div >
CSS:
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
但最简单的解决方案是使用Bootstrap
<span class="badge" style ="float:right">123</span> .