css一个人站在圆上

CSS是前端开发中最基础也是最重要的一部分，它决定了网站的样式。其中一个有趣的应用是让一个人站在圆上，让我们来看看如何实现。

.circle {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 2px solid #333;
  position: relative;
}

.person {
  width: 50px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
} 

以上代码中，“.circle”表示圆的样式，使用了border-radius属性将其设置为圆形，并在其中添加了一个“border”来显示边框。而“.person”则是人物的样式，在圆的中心使用了“position：absolute”定位，并将其向上移动了25个单位，“translateX（-50%）”使其水平居中。

接下来，将html中代码添加到这些样式中。

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

运行代码，你将看到一个人站在圆上的效果。尝试改变样式，你还可以添加更多的元素来制作更多有趣的效果！