如何隨着增加圓圈內的文字來增加圓圈？

Question

我想讓文字在圓圈內。文字增加時是否可以動態增加圓圈的大小？
This is an example。
但在這個例子中，我的問題是隻有寬度隨文本一起增加。

e.g

.badge { 
 
    background:    radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -moz-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -ms-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -o-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -webkit-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
    background-color: red; 
 
    border: 2px solid white; 
 
    border-radius: 12px; /* one half of ((border * 2) + height + padding) */ 
 
    box-shadow: 1px 1px 1px black; 
 
    color: white; 
 
    font: bold 15px/13px Helvetica, Verdana, Tahoma; 
 
    height: 16px; 
 
    padding: 4px 3px 0 3px; 
 
    text-align: center; 
 
    min-width: 14px; 
 
} 
 

 
/* only needed for this sample */ 
 
.badge { 
 
    float: left; 
 
    left: 25px; 
 
    margin: 6px; 
 
    position: relative; 
 
    top: 25px; 
 
}

<div class="badge">1</div> 
 
<div class="badge">2</div> 
 
<div class="badge">3</div> 
 
<div class="badge">44</div> 
 
<div class="badge">55</div> 
 
<div class="badge">666</div> 
 
<div class="badge">777</div> 
 
<div class="badge">8888</div> 
 
<div class="badge">9999</div>

Answer 1

我認爲你需要使用JavaScript來調整高度與寬度;你也應該使用50％的邊界半徑。我修改了your example。

$(document).ready(function(){$('.badge').each(function(){ 
 
    $(this).height($(this).width()); 
 
    $(this).css('line-height', $(this).height()+'px'); 
 
})});

.badge { 
 
    background:    radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -moz-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -ms-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -o-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -webkit-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
    background-color: red; 
 
    border: 2px solid white; 
 
    border-radius: 50%; /* one half of ((border * 2) + height + padding) */ 
 
    box-shadow: 1px 1px 1px black; 
 
    color: white; 
 
    font: bold 15px/13px Helvetica, Verdana, Tahoma; 
 
    height: 16px; 
 
    padding: 3px; 
 
    text-align: center; 
 
    min-width: 16px; 
 
} 
 

 
/* only needed for this sample */ 
 
.badge { 
 
    float: left; 
 
    left: 25px; 
 
    margin: 6px; 
 
    position: relative; 
 
    top: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="badge">1</div> 
 
<div class="badge">2</div> 
 
<div class="badge">3</div> 
 
<div class="badge">44</div> 
 
<div class="badge">55</div> 
 
<div class="badge">666</div> 
 
<div class="badge">777</div> 
 
<div class="badge">8888</div> 
 
<div class="badge">9999</div>