文章詳情頁
css - 如何做一個完整的圓？裡面顯示數字
瀏覽：94日期：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. python - 如何統計一份英文 API 開發文檔（如 javadoc文檔）的詞頻？2. mysql優化 - mysql 一張表如果不能確保字段列長度一致，是不是就不需要用到char。3. python - oslo_config4. 請教一個mysql去重取最新記錄5. python - 請問這兩個地方是為什么呢？6. python - 為什么match匹配出來的結果是<_sre.SRE_Match object; span=(0, 54), match=’’>7. javascript - 按鈕鏈接到另一個網址 怎么通過百度統計計算按鈕的點擊數量8. 人工智能 - python 機器學習 醫療數據 怎么學9. php - 有關sql語句反向LIKE的處理10. 大家都用什么工具管理mysql數據庫？
排行榜
網公網安備