CSS如何实现印章文字围绕圆形排版样式？

Question

CSS如何实现这种文字围绕圆形并且始终居中的效果。

Answer 1

可以用 svg 中的 textPath 来实现

<svg viewBox="0 0 300 150" height="150">
  <path id="circle" stroke="deepskyblue" fill="none" d="M90 75a60 60 0 1 0 120 0a60 60 0 1 0 -120 0z"/>
  <text>
    <textPath href="#circle">环绕文本</textPath>
  </text>
</svg>

可以参考这篇文章

https://www.zhangxinxu.com/wo...

Answer 2

可以使用svg实现，或者一个字一个dom做旋转

Answer 3

css 只能作旋转变换，建议用 svg 文本路径，另外，以前做作业时用 canvas 写过弧形文本（具有自动居中效果），这里也放上来当做参考

Pen: https://codepen.io/mannix-zho...

Answer 4

https://stackoverflow.com/questions/2840862/is-there-a-way-to-curve-arc-text-using-css3-canvas

链接里 svg , canvas , 纯css 方案都有