实现环形文字需要用到SVG。
<div class="cir">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z" id="cir"></path>
<text>
<textPath xlink:href="#cir">this is the circle text this is the circle text</textPath>
</text>
</svg>
</div>
//css
.cir{
width: 10em;
height: 10em;
margin: 3em auto;
}
.cir path{
fill: none; //默认填充黑色,去掉填充
}
.cir svg{
display: block;
overflow: visible; // 让超出SVG的部分显示出来
}