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

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

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

当前回答

.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

其他回答

你可以使用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

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

2015-01-21 23:59:25

在css中做这样的事情吗

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

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

2011-02-01 10:13:45

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

2013-06-04 19:56:42

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

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

2018-09-09 07:42:49

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

推荐文章

最新文章

标签