如何在圆圈周围显示文本。CSS形状-外部

<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 将边框半径设置为宽高的一半，实现圆形 */
  background-color: #f00; /* 设置圆形的背景颜色 */
}

<div class="circle">文本</div>

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f00;
}

.circle:before {
  content: ""; /* 为伪元素添加内容 */
  position: absolute;
  top: -20px; /* 设置伪元素在圆圈上方的位置 */
  left: -20px; /* 设置伪元素在圆圈左侧的位置 */
  width: 140px; /* 设置伪元素的宽度 */
  height: 140px; /* 设置伪元素的高度 */
  border: 2px solid #f00; /* 设置伪元素的边框样式 */
  border-radius: 50%; /* 设置伪元素的边框半径，实现圆形 */
}