css - 为什么圆锥梯度的结果随着远离中心变得越来越模糊？

Question

我对圆形 div 应用了锥形渐变，这就是结果。我希望颜色边界保持清晰，因为它位于中心或第一个和最后一个部分之间。我怎样才能做到这一点？

.n1st-circle-menu {
    background: conic-gradient(

        #cf7fb7 0%, #cf7fb7 6.25%, 
        #a00071 6.25%, #a00071 12.5%, 
        #cf7fb7 12.5%, #cf7fb7 18.75%, 
        #a00071 18.75%, #a00071 25%,
        #cf7fb7 25%, #cf7fb7 31.25%,
        #a00071 31.25%, #a00071 37.5%, 
        #cf7fb7 37.5%, #cf7fb7 43.75%,
        #a00071 43.75%, #a00071 50%, 
        #cf7fb7 50%, #cf7fb7 56.25%,
        #a00071 56.25%, #a00071 62.5%, 
        #cf7fb7 62.5%, #cf7fb7 68.75%,
        #a00071 68.75%, #a00071 75%, 
        #cf7fb7 75%, #cf7fb7 81.25%,
        #a00071 81.25%, #a00071 87.5%, 
        #cf7fb7 87.5%, #cf7fb7 93.75%,
        #a00071 93.75%, #a00071 100%

        
        ) 50% 50% / 100% 100% no-repeat;
    width: 800px;
    height: 800px;
    border-radius: 50%;
}

<div class="n1st-circle-menu"></div>

请在此处查看结果

Answer 1

尝试重复渐变它可能看起来更好：

.n1st-circle-menu {
  background: 
    repeating-conic-gradient(
      #cf7fb7 0 calc(360deg/16), 
      #a00071 0 calc(360deg/8));
  width: 800px;
  height: 800px;
  border-radius: 50%;
}

<div class="n1st-circle-menu"></div>