圓形上文字是一種獨(dú)特的設(shè)計效果，通常應(yīng)用于徽標(biāo)或按鈕等場合。在使用CSS技術(shù)實(shí)現(xiàn)圓形上文字時，有兩種常見的方法：一種是利用偽元素before和after的旋轉(zhuǎn)以及絕對定位，另一種則是使用CSS3的屬性text-path。

使用偽元素的方法，可以通過以下代碼實(shí)現(xiàn)：

.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: #007bff;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
}
.circle:before,
.circle:after {
content: "";
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background: #007bff;
border-radius: 50%;
transform-origin: 100% 0;
}
.circle:before {
transform: rotate(180deg);
}
.circle:hover:before,
.circle:hover:after {
background: #0056b3;
}
.circle:before {
z-index: 1;
}
.circle:after {
z-index: 2;
transform: rotate(180deg);
}
.circle span {
position: relative;
z-index: 3;
}

這段代碼中，我們首先定義了一個class為circle的元素，然后給這個元素設(shè)置了寬高和圓角半徑，使其變成一個圓形。接著，我們設(shè)置了背景顏色和前景顏色，并將其居中對齊。然后，我們創(chuàng)建了兩個偽元素before和after，并將它們都設(shè)置成圓形并橫向半分。然后我們將before元素翻轉(zhuǎn)180度，這樣它在上方，after元素在下方，就可以形成一個圓環(huán)。此時，我們將before元素的z-index設(shè)為1，after元素的z-index設(shè)為2，確保after元素在上方，然后我們在圓環(huán)中間添加了一個span元素，用來放置文字內(nèi)容。

而使用CSS3的屬性text-path，可以通過以下代碼實(shí)現(xiàn)：

.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: #007bff;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
}
.circle span {
text-align: center;
display: block;
transform: rotate(180deg);
}
.circle span path {
fill: none;
stroke-width: 1px;
stroke: white;
}

這段代碼中，我們首先定義了一個class為circle的元素，設(shè)置了寬高和圓角半徑，以及背景顏色和前景顏色。接著，我們在這個元素中添加了一個span元素，并將span元素的text-align設(shè)置為center，以使文字居中對齊并翻轉(zhuǎn)。然后，我們?yōu)閟pan元素中的文字添加了一個path元素，利用text-path屬性將這個path元素繞圓形軌跡旋轉(zhuǎn)，并設(shè)置描邊和描邊寬度。這樣，我們就可以實(shí)現(xiàn)圓形上文字的效果。