如何使用 CSS 建立圓形數字背景？

使用CSS 將數字包圍在圓形背景

借助CSS 的強大功能，可以毫不費力地將數字包圍在圓形背景中，從而增強數字的視覺吸引力。請按照以下步驟完成此操作：

在 CSS 檔案中，建立一個具有以下屬性的類別：

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

在 HTML 檔案中，將數字包裝在

中。元素並套用 .numberCircle 類別。

<div class="numberCircle">30</div>

這將以圓形背景包圍數字，如提供的圖像所示。根據需要調整 CSS 屬性以自訂圓圈的外觀及其內部的數字。

以上是如何使用 CSS 建立圓形數字背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！