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

我想把一个数字围成一个圆，就像下图所示:

这可能吗?它是如何实现的?

当前回答

下面是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>

2020-09-08 20:20:54

其他回答

你可以使用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仍然不支持圆角。

2011-02-01 10:13:13

.numberCircle { 这个特性:50%; 宽度:40像素; 高度:40像素; 显示:块; 浮:左; 边框:2px实体#000000; 颜色:# 000000; text-align:中心; margin-right: 5 px; ｝ <h3><span class="numberCircle">1</span> Regiones del Interior</h3>

2017-06-16 17:23:04

虽然迟到了，但下面是我用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>

2018-12-11 21:46:32

你可以使用

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/

2021-10-04 15:08:33

我很惊讶没有人使用更容易理解的flex，所以我把我的答案放在这里:

要创建一个圆，请确保宽等于高为了适应圆圈中数字的字体大小，请使用em而不是px 要将数字居中，请使用flex和justify-content: center;对齐项目:中心; 如果数字增加(例如>1000)，则同时增加宽度和高度

这里有一个例子:

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

2020-12-15 22:17:36

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

推荐文章

最新文章

标签