文章詳情頁
css - 如何做一個完整的圓？裡面顯示數字
瀏覽：70日期：2023-01-26 09:40:50
問題描述
數字有個位數到百位數
padding:10px; background-color:#F00; color:#fff; border-radius:50%;
<span class='alert'>9</span>
<span class='alert'>999</span>
如何讓它保持正圓的同時當有數字時不變形？ 個位數和百位數
問題解答
回答1：網上找了個
<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/
回答2：你要行把span設置為block 設置個寬高像下面的樣式
width: 30px;height: 30px;background-color: #F00;color: #fff;border-radius: 50%;display: block;text-align: center;line-height: 30px;
回答3：border-radius：xxx 寬度是 元素的長度的一半
標簽：
CSS
相關文章：
1. javascript - ionic1的插件如何遷移到ionic2的項目中2. java - 如何在Fragment中調用Activity的onNewIntent?3. javascript - h5上的手機號默認沒有識別4. mysql里的大表用mycat做水平拆分，是不是要先手動分好，再配置mycat5. css - 關于input標簽disabled問題6. python - 獲取到的數據生成新的mysql表7. 怎么用css截取字符？8. window下mysql中文亂碼怎么解決？？9. javascript - jquery hide()方法無效10. python的文件讀寫問題？
排行榜
網公網安備