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

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

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

当前回答

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

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

2011-02-01 10:19:37

其他回答

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

.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

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

在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

The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:

.numberCircle { 宽度:120 px; 行高:120 px; 这个特性:50%; text-align:中心; 字体大小:32像素; 边框:2px实体#666; ｝ < div class = " numberCircle " > < / div > 1 < div class = " numberCircle”> 100 < / div > < div class = " numberCircle”> 10000 < / div > < div class = " numberCircle”> 1000000 < / div >

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

在JSFiddle上可以看到。

2013-10-27 01:08:44

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

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

2015-09-15 13:37:31

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

推荐文章

最新文章

标签