CSS圓圈為2px數字,是一種常用的樣式效果。通過它,我們可以讓頁面中的數字或者文本內容以圓圈的形式呈現。下面我們來看看如何實現這種效果:
.circle{ width: 2em; height: 2em; line-height: 2em; text-align: center; border-radius: 50%; background-color: #333; color: #fff; font-size: 1.2em; display: inline-block; }
首先,我們創建一個class為“circle”的樣式,將需要呈現圓圈的元素應用該樣式。width和height屬性設置為2em,即2倍字體大小的寬高,這里我們將使用em作為單位,因為它是相對單位,能夠自適應頁面的字體大小。line-height屬性設置為2em,將文字居中顯示。text-align屬性設置為center,讓文字水平居中。border-radius屬性設置為50%,將元素轉化為圓形。background-color屬性設置為#333,字體顏色設置為#fff,設置圓圈和字體的背景和顏色。font-size屬性設置為1.2em,讓文字字號略大于圓圈的直徑。display屬性設置為inline-block,使該元素在文本流中出現。
在HTML中,我們可以在需要呈現圓圈的數字或文本前后加上span標簽,然后給span標簽添加class為“circle”,即可實現圓圈樣式。例如:
今天是5號
我的生日是8月18日
通過以上CSS樣式,就可以實現一個簡單的CSS圓圈為2px數字效果。