文章詳情頁
css - 如何做一個完整的圓？裡面顯示數字
瀏覽：166日期：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 - immutable配合react提升性能？2. javascript - sublime快鍵鍵問題3. Apache 已經把網站根目錄的改為allow from all了，但是服務器還是不能訪問？4. javascript - 移動端上不能實現拖拽布局嗎？5. css - 寫頁面遇到個布局問題，求大佬們幫解答，在線等，急！~6. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化7. 配置Apache時，添加對PHP的支持時語法錯誤8. 實現bing搜索工具urlAPI提交9. phpstudy8.1支持win11系統嗎？10. javascript - nodejs關于進程間發送句柄的一點疑問
排行榜
網公網安備