css 绘制三个同心圆，其中最小的那个圆有边框

您可以使用 CSS 的伪元素和 border 属性来绘制三个同心圆，其中最小的那个圆有边框。以下是示例代码：

HTML 代码：

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

CSS 代码：

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

.circle::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #fff;
}

.circle::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px solid #000;
}

解释：

- 首先，我们定义一个圆形的 div 元素，并设置其宽高为 150px，边框半径为 50%，背景色为灰色。
- 然后，使用 ::before 伪元素来创建一个比原圆形稍小的白色圆形，使其相对于原圆形位置向内偏移 10px。
- 最后，使用 ::after 伪元素来创建一个比白色圆形更小的有黑色边框的圆形，使其相对于白色圆形位置向内偏移 10px。

这样就完成了三个同心圆的绘制，其中最小的那个圆拥有了边框。