css 圆环

/* 使用 CSS 创建一个圆环 */

/* 定义一个容器 */
.circle-container {
  width: 200px;
  height: 200px;
  position: relative;
}

/* 创建一个圆形的背景 */
.circle {
  width: 100%;
  height: 100%;
  background-color: #3498db;
  border-radius: 50%;
}

/* 创建一个内圆，用于形成圆环效果 */
.inner-circle {
  width: 80%;
  height: 80%;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
}

/* HTML 示例代码 */
/*
<div class="circle-container">
  <div class="circle">
    <div class="inner-circle"></div>
  </div>
</div>
*/

/* 解释说明：
- .circle-container 是一个容器，用于放置圆形元素。
- .circle 是一个完整的圆形，使用 `border-radius: 50%` 将其变成圆形，并设置了背景颜色。
- .inner-circle 是一个较小的圆形，放置在 .circle 的中心位置，通过绝对定位和百分比尺寸来实现。
- 通过在 .circle 中嵌套 .inner-circle，形成了一个圆环的效果。
*/