css 文字排列成圆形

要将CSS文字排列成圆形，我们可以使用CSS的transform属性和伪类来实现。下面是一个简单的示例：

首先，我们创建一个包含文字的div，并为其添加一个类名。

<div class="circle-text">CSS</div>

然后，我们使用CSS样式来定义该类名的样式。

.circle-text {
  width: 200px;
  height: 200px;
  border-radius: 50%;  /* 将div变成圆形 */
  text-align: center;  /* 让文字居中 */
  line-height: 200px; /* 设置行高等于div的高度，使文字在垂直方向上居中 */
  background-color: gray;  /* 添加背景颜色 */
  color: white;  /* 设置字体颜色为白色 */
  font-size: 24px;  /* 设置字体大小 */
  transform: rotate(180deg); /* 将文字沿着圆心旋转180度，以便文字在圆形中水平排列 */
}

.circle-text::before {
  content: '';  /* 使用伪类添加一个空的内容 */
  width: 50%;  /* 将伪类的宽度设置为50%，刚好是文字宽度的一半 */
  height: 100%;  /* 伪类的高度和div相同 */
  position: absolute;  /* 绝对定位 */
  top: 0;  /* 将伪类上边距设置为0 */
  left: 50%;  /* 将伪类的左边距设置为50% */
  background-color: gray; /* 使用与div相同的背景颜色 */
  transform-origin: bottom; /* 设置旋转的起始点为底部，使其旋转到div的上方 */
  transform: rotate(180deg); /* 将伪类沿着圆心旋转180度，以便呈现圆形 */
}

通过以上CSS代码，我们可以实现将文字排列成圆形。我们使用div的border-radius属性将其变成圆形，然后使用transform属性和伪类来旋转文字和伪类，以实现文字在圆形中水平排列。通过调整div的宽度、高度、字体大小、背景颜色等属性，我们可以进一步自定义圆形文字的样式。