css圆环边画小圆

CSS圆环边画小圆

CSS圆环边画小圆在前端开发中比较常见，下面就来讲一下如何用CSS实现这一效果。

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

    .circle:before {
      position: absolute;
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #333;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  

代码解析：

首先，我们通过CSS中的border-radius属性实现了一个纯CSS的圆形，接下来通过:before伪元素来实现小圆形。

通过设置小圆形定位到圆环的中心。

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

    .circle:before {
      position: absolute;
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #333;
      top: calc(50% - 70px);
      left: calc(50% + 70px);
    }
  

如果我们想要让小圆移动到圆环右下角，我们需要将top和left属性的值分别设置为calc(50% 原圆直径一半)。

这里以圆环直径200px为例，所以top的值为calc(50% - 70px)，left的值为calc(50% + 70px)。

通过以上代码，就能实现CSS圆环边画小圆的效果了。