CSS 圓內數字的實現方法

// HTML 代碼
<div class="circle">
<span>1</span>
</div>
// CSS 樣式
.circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ff0000;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #ffffff;
}
.circle span {
display: inline-block;
text-align: center;
}

實現方法分析

1.首先在 HTML 中創建一個 div 元素，將數字放在 span 元素內，class 屬性設置為 circle。

2.在 CSS 樣式中，設置圓的大小和形狀，顏色等屬性，使用 flex 布局將數字居中顯示，同時設置數字的大小和顏色。

3.在 span 標簽中設置 display:inline-block 屬性，text-align:center 屬性將數字居中顯示。

總結

以上是實現 CSS 圓內數字的方法，通過設置圓形的大小、樣式和數字的樣式屬性，可以自定義多種形態的圓形數字。而實現該效果主要依賴于 CSS 樣式的靈活運用和布局技巧。