如何在CSS中围绕圆形（日食形状）创建圆形渐变边框？

问：

我正在尝试在CSS中创建一个圆形边框，并在圆圈周围使用渐变。我尝试使用带有圆锥渐变的边框图像，但渐变在矩形上显示为圆锥渐变，而不是预期的圆周围。我正在寻找一种解决方案，允许我放置一个遵循边界本身的圆形路径的渐变边框。搜索显示，在圆形上对渐变使用边框图像的主要限制是如何在角落应用渐变。与实心边框不同，渐变不会自然地围绕圆的角弯曲。相反，渐变通常是拉伸或切片的，这可能会导致角落看起来更有棱角或方形

我还尝试使用伪覆盖元素来模仿设计，但我迷失了如何将其正确放置在我的布局中以匹配设计。[图像显示了当前的设计要求。Eclipse 在容器上，所以覆盖“：：after”元素对我不起作用]（https://i.stack.imgur.com/aT2ev.png）。

这是我当前的代码，在这种情况下对我没有帮助。

<div class="gradient-circle-bottom"></div>

.gradient-circle-bottom {
        width: 188px;
        height: 581px;
        border-radius: 50%;
        position: relative;
        background: white;
        background: rgb(2, 0, 36);
        background: radial-gradient(#1b1b1ba1, #1b1b1ba1, #1b1b1ba1, #FDBE1C 100%);
        border-radius: 50%;
        z-index: -1;
        transform: rotate(50deg);
    }
    
    .gradient-circle-bottom::before {
    
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        width: 188px;
        height: 582px;
        background: #1B1B1B;
        border-radius: 50%;
        z-index: -1;
    }

这也是我尝试过的另一种解决方案：

<div class="circle-container">
     <div class="circle"></div>
</div>

.circle-container {
    width: 200px;
    height: 200px;
    padding: 10px; /* This will act as the border width */
    background: conic-gradient(
        from 90deg at 50% 50%, 
        gold, 
        gold 45%, /* Adjust to set the gradient start */
        black 45% /* Adjust to set the gradient end */
    );
    border-radius: 50%; /* Ensures the container is circular */
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    width: 100%; /* Fill the container, accounting for padding */
    height: 100%; /* Fill the container, accounting for padding */
    background: black;
    border-radius: 50%; /* Ensures the inner element is circular */
    display: block;
}