文章詳情頁
css - 如何做一個完整的圓？裡面顯示數字
瀏覽：73日期：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. webpack - vuejs+java前后臺分離實現及部署問題2. css3 - jquery div 翻轉？3. docker安裝后出現Cannot connect to the Docker daemon.4. docker容器呢SSH為什么連不通呢？5. docker鏡像push報錯6. docker start -a dockername 老是卡住，什么情況？7. python - 有什么好的可以收集貨幣基金的資源?8. docker網絡端口映射，沒有方便點的操作方法么？9. node.js - nodejs debug問題10. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題
排行榜
網公網安備