为什么锥形渐变的结果会随着远离中心而变得模糊

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>