我想在圆圈内放置文字。当文本增加时,是否可以动态增加圆的大小?
This is an example。
但在这个例子中,我的问题是只有宽度随着文本一起增加。
例如
.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>
答案 0 :(得分:7)
我认为您需要使用javascript来调整高度以匹配宽度;你还应该使用50%作为border-radius。我修改了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>