如何使用 CSS 用圆圈包围数字？
Posted
技术标签:
【中文标题】如何使用 CSS 用圆圈包围数字？【英文标题】：How to use CSS to surround a number with a circle? 【发布时间】：2011-06-19 04:10:50 【问题描述】：我想将一个数字围成一个圆圈，如下图所示：
这可能吗？它是如何实现的？
【问题讨论】：
【参考方案1】：您可以为此使用边框半径：
<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还是不支持圆角的。
【讨论】：
别忘了 `-webkit-border-radius: 15px;` 还有一个针对 IE htmlremix.com/css/curved-corner-border-radius-cross-browser 的修复程序，但要三思而后行 +1 可能是最简单的方法...... IE 的后备看起来也不错（方形）。如果我记得的话，wordpress 会这样做【参考方案2】：在你的 CSS 中做这样的事情
分区 宽度：10em；高度：10em； -webkit-border-radius：5em； -moz-边界半径：5em； p 文本对齐：居中；边距顶部：4.5em；使用段落标签来编写文本。希望有帮助
【讨论】：
【参考方案3】：这是一个demo on JSFiddle 和一个 sn-p：
.numberCircle
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
<div class="numberCircle">30</div>我的答案是一个很好的起点，其他一些答案为不同的情况提供了灵活性。如果你关心IE8，看看我的回答old version。
【讨论】：
当前最新的Internet Explorer 9，实际上支持border-radius。 ...而且 div 不是一个很好的选择。 :) 为了让它在小提琴中工作，你可以反对 CDN，比如jsdelivr，而不是使用 URL 的相对路径。如果您使用//cdn.jsdelivr.net/css3pie/2.0b1/PIE.htc 更新小提琴中的 URL，它应该可以在任何地方使用，而无需额外的重组。
@KyleMit：理论上这是个好主意。不幸的是，CSS3 PIE 有一个same-domain limitation。
为了避免在更改字体大小时必须在 CSS 中进行数学运算（例如，如果您在进行响应式设计会很麻烦），您可以使用仅使用像素描述字体大小：jsfiddle.net/dQR9T/7058
@steven 如何确保圆圈始终围绕数字，或者如果数字为 24928，我们可以将圆圈变大现在溢出【参考方案4】：
你就像一个标准的方块，也就是一个正方形
这是 CSS 3 的特性，并没有得到很好的支持，你可以信赖 firefox 和 safari。
.circle
width: 10em;
height: 10em;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
border: 1px solid black;
<div class="circle"><span>1234</span></div>【讨论】：
似乎效果不佳【参考方案5】：如果是20及以下，你可以使用unicode字符①②...⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
【讨论】：
一个好主意，但如果圆圈仅用于显示目的，请注意您会破坏语义【参考方案6】：我在这里的解决方案 - 这很容易允许不同的尺寸和颜色，并与 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;
了解如何做到这一点并不难。更大的问题是是否有可能使圆圈的尺寸适应内容。
目前我认为这是不可能的。有人吗？
【讨论】：
【参考方案7】：这样的事情可能会起作用（对于数字 0 到 99）：
.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;
<body>
<div class="circle">
<p>30</p>
</div>
</body>【讨论】：
【参考方案8】：这里大多数其他答案的问题是您需要调整外部容器的大小，使其成为基于字体大小和要显示的字符数的完美大小。如果您混合使用 1 位数字和 4 位数字，它将不起作用。如果字体大小和圆圈大小之间的比例不完美，您最终会得到一个椭圆形或一个在大圆圈顶部垂直对齐的小数字。这应该适用于任何数量的文本和任何大小的圆圈。只需将width 和line-height 设置为相同的值即可：
.numberCircle
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>如果您需要使内容更长或更短，您只需调整容器的宽度以使其更适合。
See it on JSFiddle.
【讨论】：
这正是我遇到的问题，里面显示的百分比可能是“1”、“10”或“100”。这很完美，谢谢！ 注意this suggested edit 被拒绝了，但这些更改实际上使文本垂直居中更好一些，所以我手动将它们添加到答案中。 这是更好的答案。我会使用 translateY(-50%) 而不是负上边距 @Tobias 谢谢你的好主意。我已经更新了我的答案。 删除跨度并将text-align和line-height添加到div会更干净。可能仍然是最好的答案。【参考方案9】：
改进第一个答案只是去掉填充并添加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;
【讨论】：
【参考方案10】：对于因内容而异的圆圈大小，这应该有效：
.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;
<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>它依赖于内容的宽度加上margin- 来确定半径，然后使用padding- 扩展高度以匹配。 margin- 需要根据字体大小进行调整。
更新以移除内部元素：
.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;
<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>使用伪元素来强制高度。垂直对齐需要零宽度空间。将line-height:0px 从外部移动到伪，以便在 IE8 降级时至少可见。
【讨论】：
对我来说，这是最好的解决方案。它允许更大的数字，并且是最具可扩展性的。所有其他解决方案都有太多的尺寸硬编码。这个是最少的。字体大小可以在不破坏这一点的情况下进行相当大的更改。如果大幅变化，则需要调整保证金，但这是非常宽容的。不过，必须使用嵌套元素有点消极。 @Necreaux 用伪元素替换显式内部元素的版本更新了答案。 确实是最好的解决方案。我刚刚将 margin-left 和 margin-right 大小替换为 0.35em 而不是 8px（更新解决方案中的填充）。这样您就可以更改数字字体大小并保持合适的边距。 最好的一款，所有尺寸都醒得很好【参考方案11】：三十点的答案是对的，但缺少一点。您需要添加 position: relative ，如果您想在圆圈中具有居中值并且还包括不同的数字范围。 比如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;
但最简单的解决方案是使用 Bootstrap
<span class="badge" style ="float:right">123</span>
【讨论】：
【参考方案12】：最简单的方法是使用引导程序和徽章类
<span class="badge">1</span>
【讨论】：
这太棒了！我已经在使用 bootstrap，只是不知道这个类的存在。 不错的答案 navid！【参考方案13】：此版本不依赖于硬编码的固定值，而是相对于font-size 的div 的大小。
http://jsfiddle.net/qod1vstv/
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>
【讨论】：
嗨，这很好，但如果数字很大，即使是 100 或 1000，它也会滚出圆圈。另外，是否可以使用字体的大小来创建新的背景颜色 漂亮的解决方案！ 完美解决方案！【参考方案14】：.numberCircle
border-radius: 50%;
width: 40px;
height: 40px;
display: block;
float: left;
border: 2px solid #000000;
color: #000000;
text-align: center;
margin-right: 5px;
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>【讨论】：
虽然这段代码很有用，但最好提供一些解释【参考方案15】：聚会迟到了，但这是一个对我有用的纯引导解决方案。我正在使用 Bootstrap 4：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>您基本上将 bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 类添加到您的 <span>（或其他）元素中，然后就完成了。
请注意，如果您的内容超过一位，您可能需要调整边距和填充类。
【讨论】：
【参考方案16】：这是我的做法，使用 square 方法。好处是它适用于不同的值，但您需要 2 个跨度。
.circle
display: inline-block;
border: 1px solid black;
border-radius: 50%;
position: relative;
padding: 5px;
.circle::after
content: '';
display: block;
padding-bottom: 100%;
height: 0;
opacity: 0;
.num
position: absolute;
top: 50%;
transform: translateY(-50%);
.width_holder
display: block;
height: 0;
overflow: hidden;
<div class="circle">
<span class="width_holder">1</span>
<span class="num">1</span>
</div>
<div class="circle">
<span class="width_holder">11</span>
<span class="num">11</span>
</div>
<div class="circle">
<span class="width_holder">11111</span>
<span class="num">11111</span>
</div>
<div class="circle">
<span class="width_holder">11111111</span>
<span class="num">11111111</span>
</div>【讨论】：
【参考方案17】：聚会迟到了，但这是我使用https://codepen.io/jnbruno/pen/vNpPpW的解决方案
不需要额外的工作。 谢谢约翰·诺埃尔·布鲁诺
.btn-circle.btn-xl
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
.btn-circle
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
<div class="panel-body">
<h4>Normal Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</button>
</div>【讨论】：
约翰·诺埃尔·布鲁诺是谁？如果从博客或教程中获取，提供链接将是一个加分项【参考方案18】：这是一个demo on JSFiddle 和一个 sn-p：
/* 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>【讨论】：
我比第一个更喜欢这个解决方案，因为无论数字是多少，圆圈都保持相同的大小。【参考方案19】：我很惊讶没有人使用更容易理解的flex，所以我把我的答案版本放在这里：
-
要创建一个圈子，请确保
width 等于 height
为了适应圈内号码的font-size，使用em而不是px
要使数字在圆圈中居中，请将 flex 与 justify-content: center; align-items: center; 结合使用
如果数量增加（例如>1000），同时增加width和height
这是一个例子：
.circled-number
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
.circled-number--big
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
<div class="circled-number">
30
</div>
<div class="circled-number--big">
3000000
</div>【讨论】：
【参考方案20】：你可以使用
span.red
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
span.grey
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
span.green
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
span.blue
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
span.pink
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
<h1><span class="grey">1</span>A grey circle with number inside</h1>
<h1><span class="red">2</span>A red circle with number inside</h1>
<h1><span class="blue">3</span>A blue circle with number inside</h1>
<h1><span class="green">4</span>A green circle with number inside</h1>
<h1><span class="pink">5</span>A pink circle with number inside</h1>感谢https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/
【讨论】：
以上是关于如何使用 CSS 用圆圈包围数字？的主要内容，如果未能解决你的问题，请参考以下文章
css3画矩形,矩形里面有多个圆圈,圆圈里面有字,如何实现?
如何最好地使用 jQuery：使用 HTML 或 CSS 进行格式化