如何使用CSS围绕一个数字用圆圈？
我想围绕像这个图像中的一个数字：
这是可能的，它是如何实现的？
这里是一个关于JSFiddle的演示
HTML：
<div class="numberCircle">30</div> CSS：
.numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; }
为了使这个工作在IE8及以上 ，你必须下载和使用CSS3 PIE 。 我上面的演示在IE8中不起作用，但是这只是因为jsFiddle没有托pipePIE.htc 。
如果是20以下，则可以使用Unicode字符①②…⑳
大多数其他答案的问题在这里是你需要调整外部容器的大小，以便它是基于字体大小和字符数显示的完美大小。 如果混合1位数字和4位数字，则不起作用。 如果字体大小和圆圈大小之间的比例不完美，则最终会在大圆的顶部垂直排列一个椭圆形或小数字。 这应该适用于任何数量的文字和任何大小的圆圈。 只需将width和line-height设置为相同的值即可：
.numberCircle { border-radius: 50%; width: 120px; font-size: 32px; border: 2px solid #666; } .numberCircle span { text-align: center; line-height: 120px; display: block; }
<div class="numberCircle"><span>1</span></div> <div class="numberCircle"><span>100</span></div> <div class="numberCircle"><span>10000</span></div> <div class="numberCircle"><span>1000000</span></div>
对于基于内容的圆圈大小，这应该工作：
<span class="numberCircle"><span>30</span></span> <span class="numberCircle"><span>1</span></span> <span class="numberCircle"><span>5435</span></span> <span class="numberCircle"><span>2</span></span> <span class="numberCircle"><span>100</span></span> .numberCircle { display:inline-block; line-height:0px; border-radius:50%; border:2px solid; font-size:32px; } .numberCircle span { display:inline-block; padding-top:50%; padding-bottom:50%; margin-left:8px; margin-right:8px; }
它依靠内容的宽度加上padding-来确定半径，然后使用padding-来扩展高度以匹配。 margin-需要根据字体大小进行调整。
更新删除内部元素：
<span class="numberCircle">30</span> <span class="numberCircle">1</span> <span class="numberCircle">5435</span> <span class="numberCircle">2</span> <span class="numberCircle">100</span> <style type="text/css"> .numberCircle { display:inline-block; border-radius:50%; border:2px solid; font-size:32px; } .numberCircle:before, .numberCircle:after { content:'\200B'; display:inline-block; line-height:0px; padding-top:50%; padding-bottom:50%; } .numberCircle:before { padding-left:8px; } .numberCircle:after { padding-right:8px; } </style>
使用伪元素来强制高度。 需要零宽度空间垂直alignment。 将line-height:0px从外部移动到伪部分，以便在降级IE8时至less可见。
最简单的方法是使用bootstrap和badge类
<span class="badge">1</span>
这个版本不依赖于硬编码的固定值，而是相对于div的font-size 。
CSS：
.numberCircle { font: 32px Arial, sans-serif; width: 2em; height: 2em; box-sizing: initial; background: #fff; border: 0.1em solid #666; color: #666; text-align: center; border-radius: 50%; line-height: 2em; box-sizing: content-box; }
HTML：
<div class="numberCircle">30</div> <div class="numberCircle" style="font-size: 60px">1</div> <div class="numberCircle" style="font-size: 12px">2</div>
你可以使用border-radius来实现这个function：
<html> <head> <style type="text/css"> .round { -moz-border-radius: 15px; border-radius: 15px; padding: 5px; border: 1px solid #000; } </style> </head> <body> <span class="round">30</span> </body> </html>
边界半径和填充值一起玩，直到你满意的结果。
但是这不适用于所有的浏览器。 我想IE仍然不支持圆angular。
我的解决scheme在这里 – 这很容易允许不同的大小和颜色和关系到CMS编辑控制。 IE降级为正方形。
HTML ：
<div class="circular-label label-outer label-size-large label-color-pink"> <div class="label-inner"> <span>Fashion & Beauty</span> </div> </div>
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; }
不难看出如何做到这一点。 更大的问题是，是否有可能使圆规模的维度内容。
目前我不认为这是可能的。 任何人？
你像一个标准的块，这是一个正方形
.circle { width: 10em; height: 10em; -webkit-border-radius: 5em; -moz-border-radius: 5em; }
这是CSS 3的特点，它不是非常好压倒，你可以肯定的火狐和Safari浏览器。
<div class="circle"><span>1234</span></div>
在你的CSS做这样的事情
div {
宽度：10em; 身高：10em;
-webkit-border-radius：5em; -moz-border-radius：5em;
}
p {
text-align：center; margin-top：4.5em;
}
使用段落标签来写文本。 希望有所帮助
就像我在这里所做的一样可以工作（对于数字0到99）：
CSS：
.circle { border: 0.1em solid grey; border-radius: 100%; height: 2em; width: 2em; text-align: center; } .circle p { margin-top: 0.10em; font-size: 1.5em; font-weight: bold; font-family: sans-serif; color: grey; }
HTML：
<body> <div class="circle"><p>30</p></div> </body>
改进第一个答案只是摆脱填充和添加line-height和vertical-align ：
.numberCircle { border-radius: 50%; width: 36px; height: 36px; line-height: 36px; vertical-align:middle; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; }
HTML示例
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>
码
.numberCircle { border-radius:50%; width:40px; height:40px; display:block; float:left; border:2px solid #000000; color:#000000; text-align:center; margin-right:5px;
}
三十几岁的答案是正确的，但缺less一点。 你需要添加位置：相对 ，如果你想在圆中居中的数值，也包括不同的数字范围。 例如123;
HTML：
<div class="numberCircle">30</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; }
但最简单的解决scheme是使用Bootstrap
<span class="badge" style ="float:right">123</span>
