如何使用CSS围绕一个圆的数字?

小开

你可以使用border-radius:

<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仍然不支持圆角。

小开

在css中做这样的事情吗

div {
width: 10em; height: 10em;
-webkit-border-radius: 5em; -moz-border-radius: 5em;
}
p {
text-align: center; margin-top: 4.5em;
}

使用段落标签来书写文本。希望这能有所帮助

小开

最佳答案

下面是演示在JSFiddle和一个代码片段:

.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>

My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.

小开

你用一个标准的方块，那是一个正方形

这是css3的特性，它不是很受支持，你可以依靠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>

小开

如果是20或更低，你可以直接使用unicode字符①②…⑳

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

小开

我在这里的解决方案-这很容易允许不同的大小和颜色，并连接到CMS进行编辑控制。IE退化为平方。

超文本标记语言:

<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;
}

要知道怎么做并不难。更大的问题是，是否有可能使圆圈的尺寸与内容相匹配。

目前我认为这是不可能的。有人知道吗?

小开

对于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>

小开

这里大多数其他答案的问题是，您需要调整外部容器的大小，以便它是基于字体大小和要显示的字符数量的完美大小。如果你把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>

如果您需要使内容更长或更短，您所需要做的就是调整容器的宽度以更好地适应。

在JSFiddle上可以看到。

小开

改进第一个答案只需去掉填充并添加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;
}

小开

对于根据内容变化的圆圈大小，这应该是有效的:

.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降级时至少可见。

小开

30tydot的答案是对的，但少了一点。你需要添加位置:相对，如果你想在圆中有居中值，并包括不同范围的数字。例如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>

小开

最简单的方法是使用bootstrap和badge类

 <span class="badge">1</span>

小开

此版本不依赖于硬编码的固定值，而是相对于div的font-size的大小。

http://jsfiddle.net/qod1vstv/ < a href = " 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>

小开

.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>

小开

虽然迟到了，但这里有一个对我有效的自助解决方案。我使用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>(或其他)元素中，就完成了。

请注意，如果内容有多个数字，则可能需要调整边距和填充类。

小开

这是我的方法，用平方法。优点是它适用于不同的值，但你需要两个跨度。

.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>

小开

来晚了，但这是我用https://codepen.io/jnbruno/pen/vNpPpW的解决方案

不需要额外工作。谢谢John Noel Bruno

.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>

小开

下面是演示在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>

小开

我很惊讶没有人使用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>

小开

你可以使用

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/