css - 如何做一個完整的圓？裡面顯示數字-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

迷茫 2017-04-17 14:42:41

[HTML讨论组]

688

數字有個位數到百位數

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

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

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

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

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(3)

PHP中文网2017-04-17 14:44:41 3楼

网上找了个

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

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

赞 +0

添加回复

黄舟2017-04-17 14:44:41 2楼

你要行把span设置为block 设置个宽高像下面的样式

width: 30px;
height: 30px;
background-color: #F00;
color: #fff;
border-radius: 50%;
display: block;
text-align: center;
line-height: 30px;

赞 +0

添加回复

高洛峰2017-04-17 14:44:41 1楼

border-radius：xxx  宽度是 元素的长度的一半

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

app下载

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

PHP学习

技术支持

返回顶部