扇形文字是一種獨特而有趣的方式來展示文本信息。借助CSS3的強大功能，我們可以輕松地創建出美麗的扇形文字效果，使得網站的設計更加生動有趣。

.circle-text {
display: inline-block;
position: relative;
padding: 0.4rem 1rem;
font-size: 1.2rem;
text-align: center;
color: #fff;
border-radius: 50%;
background-color: #0078e7;
transform-style: preserve-3d;
transform: perspective(500px) rotateY(35deg) rotateZ(-45deg);
box-shadow: 0 0 10px #0078e7;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
.circle-text:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 50%;
width: 100%;
transform-origin: 0 0;
transform: rotateZ(-45deg) translateX(-50%);
}
.circle-text:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: inherit;
transform-origin: 100% 0;
transform: rotateZ(45deg);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

這段代碼實現了一個圓形的文本框，并且將文本沿著圓弧排列。代碼中，我們創建了一個圓形的塊級元素，利用border-radius屬性將其變成一個正圓形，再利用transform: perspective()將其變成3D效果。接著，我們分別利用:before和:after偽元素添加了文本框內的文字和左半圓的遮罩效果。最終，我們成功地實現了一個美麗的扇形文字效果。