CSS3的強(qiáng)大功能不僅限于樣式和布局，還可以讓你設(shè)計(jì)出驚艷的特效。今天，我們來學(xué)習(xí)如何在字體外面加上圓圈，讓頁面更加有趣。

要實(shí)現(xiàn)這個效果，首先需要在CSS中定義一個字體的樣式。我們可以使用@font-face規(guī)則來引入自定義字體，或者直接使用現(xiàn)成的字體樣式。這里，我們選擇一個Google Font字體庫中的Open Sans字體，樣式如下：

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
font-family: 'Open Sans', sans-serif;

然后，就可以開始實(shí)現(xiàn)添加圓圈的效果了。我們首先需要給字體設(shè)置position: relative;，然后通過設(shè)置::before偽元素來實(shí)現(xiàn)圓圈的效果，如下所示：

font-family: 'Open Sans', sans-serif;
position: relative;
::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 24px;
height: 24px;
border-radius: 12px;
background-color: #FFC107;
z-index: -1;
}

上面的代碼中，我們通過設(shè)置content來為偽元素添加內(nèi)容，然后通過設(shè)置position: absolute;以及top、left等屬性來定位圓圈。同時，我們還可以通過設(shè)置width、height和border-radius屬性來控制圓圈的大小和形狀，通過設(shè)置background-color屬性來設(shè)置圓圈的顏色。最后，我們將偽元素的z-index屬性設(shè)置為-1，讓圓圈在字體下方。

到這里，我們就已經(jīng)完成了添加圓圈的效果了。可以根據(jù)需要調(diào)整大小和顏色，讓頁面更加有趣。