css - 如何做一個完整的圓？裡面顯示數字

问题描述

问 题

數字有個位數到百位數

padding:10px;
    background-color:#F00;
    color:#fff;
    border-radius:50%;

<span class="alert">9</span>

<span class="alert">999</span>

如何讓它保持正圓的同時
當有數字時不變形？ 個位數和百位數

解决方案

网上找了个

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

.circle {
  display: inline-block;
  text-align: center;
  line-height: 1;
  background-color: red;
  border-radius:50%;
  font-size: 14px;
}

.circle span {
  display: block;
  padding: 50%;
  margin: -2em -50% 0;
  position: relative;
  top: 1em;
  border: 0.5em solid transparent;
  white-space: nowrap;
}

http://jsfiddle.net/zcd75Lcd/

这篇关于css - 如何做一個完整的圓？裡面顯示數字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！