文章詳情頁
css - 如何做一個完整的圓？裡面顯示數字
瀏覽：90日期：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 - 微信網頁開發從菜單進入頁面后，按返回鍵沒有關閉瀏覽器而是刷新當前頁面，求解決？2. 求救一下，用新版的phpstudy，數據庫過段時間會消失是什么情況？3. mysql replace 死鎖4. mysql - C#連接數據庫時一直這一句出問題int i = cmd.ExecuteNonQuery();5. python - 數據與循環次數對應不上6. extra沒有加載出來7. android - 安卓做前端，PHP做后臺服務器 有什么需要注意的？8. 環境搭建 - anaconda 創建python2.7環境中打開編譯器確是3.6版本9. php傳對應的id值為什么傳不了啊有木有大神會的看我下方截圖10. mysql - ubuntu開啟3306端口失敗,有什么辦法可以解決？
排行榜
網公網安備