CSS大綱環繞圖形

Question

我在CSS和HTML文件下面的代碼：

.test { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    box-shadow: inset 60px 0px white, inset 200px 0px blue; 
 
}

<div class="test"></div>

這個代碼產生的形狀正是我想要的東西;但是，我不想要白色部分周圍的藍色輪廓 - 無論如何，我可以刪除它？

爲了進一步闡明：here是當前形狀在白色背景上的樣子，here是我想要的樣子。

所有幫助非常感謝！

Answer 1

或許一招，以貼2px的白色邊框上是可以接受的。

.test { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    box-shadow: inset 60px 0px 0px 0 white, inset 200px 0px 5px blue; 
 
    position:relative; 
 
} 
 
.test:before{ 
 
    content:''; 
 
    position:absolute; 
 
    border-radius:50%; 
 
    border:2px solid white; 
 
    z-index:1; 
 
    top:-1px; 
 
    right:-1px; 
 
    bottom:-1px; 
 
    left:-1px; 
 
    pointer-events:none; 
 
}

<div class="test"></div>

Answer 2

告訴我們你想達到什麼樣的目標，以便我們知道如何幫助你實現目標。 這個小變化作出的藍色輪廓走了，只剩下你圈子看起來像日食

.test { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    box-shadow: inset 60px 0px white, inset 10px 0px blue; 
}