如何随着增加圆圈内的文字来增加圆圈？

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>