1. 首頁
  2. 問答
  3. 如何使用CSS用圓圈包圍數字？

如何使用CSS用圓圈包圍數字？

2011-02-01 88 views

回答

319

這裏有一個demo on JSFiddle和一個片段：

.numberCircle { 
 
    border-radius: 50%; 
 
    behavior: url(PIE.htc); 
 
    /* remove if you don't care about IE8 */ 
 
    width: 36px; 
 
    height: 36px; 
 
    padding: 8px; 
 
    background: #fff; 
 
    border: 2px solid #666; 
 
    color: #666; 
 
    text-align: center; 
 
    font: 32px Arial, sans-serif; 
 
}
<div class="numberCircle">30</div>

爲了使這項工作在IE8 and older，您必須下載並使用CSS3 PIE。我上面的演示在IE8中不起作用，但那只是因爲jsFiddle沒有託管PIE.htc。

來源

2011-02-01 10:15:23 thirtydot

+0

當前最新版本的Internet Explorer，9，實際上支持border-radius。 ...和div不是這個的好選擇。 :) – reisio 2012-04-25 03:15:51

+5

display：inline-block; – Kirkland 2013-06-10 18:29:05

+0

要使它在小提琴中工作，您可以針對CDN，例如[jsdelivr]（http://www.jsdelivr.com/#!css3pie），而不是使用URL的相對路徑。如果你用`// cdn.jsdelivr.net/css3pie/2.0b1/PIE.htc`更新你的小提琴中的URL，它應該可以在任何地方工作，而無需額外的重組工作。 – KyleMit 2014-01-06 16:46:19

6

可以使用邊界半徑爲這樣：

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

+0

不要忘了`-webkit-邊界半徑：15px的;`也有針對IE修復http://www.htmlremix.com/css /彎角邊界半徑跨瀏覽器，但考慮實施它 – Hannes 2011-02-01 10:17:03

+0

+1可能是最簡單的方法... IE的回退看起來也不錯（正方形）。 wordpress這樣做，如果我記得 – Ross 2011-02-01 10:17:39

1

不要在你的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 1000Suns

2

你像一個標準塊的工作，這是一個方形

.circle { 
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em; 
    }

這是CSS 3的功能，它是不是很好suporrted，你可以指望Firefox和Safari是肯定的。

<div class="circle"><span>1234</span></div>

來源

2011-02-01 10:19:37

4

這裏我的解決方案 - 這很容易地允許不同大小和顏色關係進入一個用於編輯控制的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 bearinthewoods

1

喜歡的東西我做了什麼here可以工作（對數字0〜99）：

CSS：

.circle { 
    border: 0.1em solid grey; 
    border-radius: 100%; 
    height: 2em; 
    width: 2em; 
    text-align: center; 
} 

.circle p { 
    margin-top: 0.10em; 
    font-size: 1.5em; 
    font-weight: bold; 
    font-family: sans-serif; 
    color: grey; 
}

HTML：

<body> 
    <div class="circle"><p>30</p></div> 
</body>

來源

2013-06-04 19:56:42 jstol

58

問題大多數其他答案在這裏是你需要調整外部容器的大小o它是基於字體大小和要顯示的字符數量的完美大小。如果你混合了1位數字和4位數字，它將不起作用。如果字體大小和圓形大小之間的比例不完美，則最終會在大圓的頂部垂直對齊一個橢圓形或小數字。這應該適用於任何數量的文本和任何大小的圓圈。只需設定width和line-height相同的值：

.numberCircle { 
 
    width: 120px; 
 
    line-height: 120px; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    font-size: 32px; 
 
    border: 2px solid #666; 
 
}
<div class="numberCircle">1</div> 
 
<div class="numberCircle">100</div> 
 
<div class="numberCircle">10000</div> 
 
<div class="numberCircle">1000000</div>

如果你需要使內容或長或短，所有你需要做的是調整容器的寬度美好適合。

See it on JSFiddle。

來源

2013-10-27 01:08:44 Mike

1

提高第一個答案剛剛擺脫填充，並添加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

27

對於圈子的大小不同而不同基礎上的內容可以這樣：

http://jsfiddle.net/nzsnw55s/

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

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

它依靠內容的寬度加上margin-來確定半徑，然後使用padding-的高度來擴展高度。 margin-需要根據字體大小進行調整。

更新以除去內部元件：

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

<style type="text/css"> 
.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; 
} 
</style>

使用僞元素強制高度。需要用於垂直對齊的零寬度空間。將line-height:0px從外部移動到僞，以便在降級IE8時至少可見。

來源

2015-09-15 13:37:31 ryachza

0

thirtydot的答案是正確的，但缺少一點。您需要添加職位：相對，如果您想在圓圈中居中取值幷包含不同範圍的號碼。 例如123;

HTML：

<div class="numberCircle">30</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; 
}

而是最簡單的解決方法是使用引導

<span class="badge" style ="float:right">123</span>

來源

2016-03-02 14:53:39

16

最簡單的方法是使用引導和徽章類

<span class="badge">1</span>

來源

2016-09-18 12:37:31 Navid

7

此版本不依賴於硬編碼的，固定的值，但尺寸相對於div的font-size。

http://jsfiddle.net/qod1vstv/

enter image description here

CSS：

.numberCircle { 
    font: 32px Arial, sans-serif; 

    width: 2em; 
    height: 2em; 
    box-sizing: initial; 

    background: #fff; 
    border: 0.1em solid #666; 
    color: #666; 
    text-align: center; 
    border-radius: 50%;  

    line-height: 2em; 
    box-sizing: content-box; 
}

HTML：

<div class="numberCircle">30</div> 
<div class="numberCircle" style="font-size: 60px">1</div> 
<div class="numberCircle" style="font-size: 12px">2</div>

來源

2016-11-08 16:02:27

1

HTML實例

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

CODE

.numberCircle { 

border-radius:50%; 
width:40px; 
height:40px; 
display:block; 
float:left; 
border:2px solid #000000; 
color:#000000; 
text-align:center; 
margin-right:5px;

}

來源

2017-06-16 17:23:04

相關問題

 相關問題