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

问题描述

我将圆锥形渐变应用于圆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>

Please have a look at the result here

解决方法

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

.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>