[分享]css两个圆及圆中连线

CSS 是一种用于设计网页的语言。在 CSS 中，我们可以使用一些基本的形状来绘制图形，如矩形、正方形、圆形等。在本文中，我们将介绍如何使用 CSS 来设计两个圆及圆中连线。.circle { wid...

CSS 是一种用于设计网页的语言。在 CSS 中，我们可以使用一些基本的形状来绘制图形，如矩形、正方形、圆形等。在本文中，我们将介绍如何使用 CSS 来设计两个圆及圆中连线。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

.line {
  width: 5px;
  height: 100px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

我们首先定义了两个类，其中一个用于表示圆形，另一个用于表示线条。我们可以通过设置圆的宽度、高度和边框半径来绘制圆形。通过设置背景颜色，我们可以使圆形看起来更加美观。

接下来，我们需要定义一个类来表示圆中间的连线。我们可以设置其宽度、高度及背景颜色。由于该线条应该位于圆形中央，因此我们需要使用 position 属性来将其置于中心。通过设置 top 和 left 的值并使用 transform 属性，我们可以轻松地将其移动到中心位置。

为了将两个圆形连接起来，我们需要使用 HTML 元素的父子关系。我们可以在 HTML 中添加一个包裹元素，并将两个圆形和线条元素放入其中。再使用 CSS 来确定线条的位置，例如：设置 line 元素的 left 值为第一个圆形的右侧，同时设置 top 值为第二个圆形的顶部。

<div class="wrapper">
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
  <div class="line"></div>
</div>

.wrapper {
  position: relative;
  width: 100px;
  height: 200px;
}

.circle1 {
  position: absolute;
  top: 0;
  left: 25px;
}

.circle2 {
  position: absolute;
  bottom: 0;
  right: 25px;
}

.line {
  left: 50%;
  top: 25px;
} 

通过上述代码，我们可以轻松地设计出两个圆及圆中连线的效果。在实际应用中，我们可以根据需求进行一些微调，以获得更好的效果。