CSS圓圈上顯示文字
.circle { width: 50px; height: 50px; border-radius: 50%; background-color: #e74c3c; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; font-weight: bold; } <div class="circle">1</div>
在CSS中制作圓圈并將文字顯示在圓圈上是一種非常常見的設計。你可以使用"border-radius"屬性來將一個矩形轉(zhuǎn)換成圓形。然后,你可以使用"display"屬性將該圓形轉(zhuǎn)換成一個彈性盒子容器(Flexbox container)。最后,使用"justify-content"和"align-items"屬性將文本居中顯示在圓圈中央。
在上面的代碼中,我們使用了一個類名叫作"circle"來應用上述CSS樣式,使其顯示成一個紅色的圓形。我們在該圓形中加入了一個數(shù)字"1"。你同樣可以在圓圈中使用其他內(nèi)容。
這個CSS技巧是一種簡單,靈活和效果非常好的方式來設計你的UI界面。你可以將其應用于諸如網(wǎng)站導航,產(chǎn)品標簽或其它需要有趣的標記的設計中。