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

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

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

当前回答

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

HTML:

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

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

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

2012-09-12 13:41:30

其他回答

三十点的答案是对的，但少了一点。你需要添加位置:相对，如果你想在圆中有居中值，还包括不同范围的数字。例如123;

HTML:

< div级30 =“numberCircle > < / 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> .

2016-03-02 14:53:39

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

.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

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

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

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

.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围绕一个圆的数字?

推荐文章

最新文章

标签