如何使用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

其他回答

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

我很惊讶没有人使用更容易理解的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

我在这里的解决方案-这很容易允许不同的大小和颜色，并连接到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

你可以使用

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

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

推荐文章

最新文章

标签