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

.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- s来确定半径，然后使用padding- s扩展高度以匹配。margin-'s需要根据字体大小进行调整。

更新以删除内部元素:

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

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

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

对于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 > 身体< / >

你可以使用

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/

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

这是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 >

这个版本不依赖于硬编码的固定值，而是相对于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>