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圆环边画小圆的效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！