div {
  position: relative;   /* 因為虛擬元素要進行絕對定位，父元素需要是 relative */
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 30px;
}
.a {
  background: conic-gradient(
    #fb0 0, 
    #fb0 200deg,
    #f66 0
  );
}
.b {
  background: conic-gradient(
    #f90 0, 
    #f90 50deg,
    #0a0 50deg,
    #0a0 100deg,
    #c5c 100deg,
    #c5c 200deg,
    #0af 200deg,
    #0af 230deg,
    #999 230deg,
    #999 270deg,
    #f66 0
  );
}
div::before {
  content: "";
  position: absolute;        /* 絕對定位 */
  z-index: -1;               /* 位置移動到下層 */
  width: calc(100% + 20px);  /* 尺寸比原本增加 20px */
  height: calc(100% + 20px); /* 尺寸比原本增加 20px */
  top: -10px;                /* 往上移動 10px */
  left: -10px;               /* 往左移動 10px */
  border-radius: 50%;        /* 變成圓形 */
}
.a::before {
  background: conic-gradient(
    #f90 0, 
    #f90 200deg,
    #f33 0
  );
}
.b::before {
  background: conic-gradient(
    #f60 0, 
    #f60 50deg,
    #080 50deg,
    #080 100deg,
    #a3a 100deg,
    #a3a 200deg,
    #08c 200deg,
    #08c 230deg,
    #666 230deg,
    #666 270deg,
    #f33 0
  );
}