徑向漸變無法按預期方式工作

Question

我想在僅使用CSS的另一個圓的中間創建一個完美的圓。對於我使用radial-gradient以下是我的代碼

li{ 
    list-style : none; 
} 
li:after{ 
    border-radius: 50%; 
    height: 150px; 
    width: 150px; 
    line-height: 24px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    background: radial-gradient(circle, #FFF, #FFF, #DC352E 30%); 
} 

我的HTML結構如下

<ul> 
    <li></li> 
</ul> 

但這種代碼不給我完美result.I我得到一個圓在另一箇中間但是內圈的邊緣變得模糊。我希望內圈也是一個完美的圈子，沒有任何模糊的邊緣。有沒有解決這些問題的方法？

PS：我希望只使用CSS和沒有圖像/ SVG

這裏是一個working fiddle

Answer 1

這個怎麼樣http://jsfiddle.net/0kLoLeer/9/

CSS

li{ 
    list-style : none; 
} 
li:after{ 
    border-radius: 50%; 
    height: 150px; 
    width: 150px; 
    line-height: 24px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    background: #ffffff; /* Old browsers */ 
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 24%, #dc352e 25%); /* FF3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(24%,#ffffff), color-stop(25%,#dc352e)); /* Chrome,Safari4+ */ 
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 24%,#dc352e 25%); /* Chrome10+,Safari5.1+ */ 
    background: -o-radial-gradient(center, ellipse cover, #ffffff 24%,#dc352e 25%); /* Opera 12+ */ 
    background: -ms-radial-gradient(center, ellipse cover, #ffffff 24%,#dc352e 25%); /* IE10+ */ 
    background: radial-gradient(ellipse at center, #ffffff 24%,#dc352e 25%); /* W3C */ 
} 

Answer 2

你可以這樣做：

CSS

li{ 
    list-style : none; 
} 
li:after{ 
    border-radius: 50%; 
    height: 150px; 
    width: 150px; 
    line-height: 24px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    background: radial-gradient(circle, #ffffff 0%,#ffffff 29%,#dc352e 30%,#dc352e 100%); 
} 

DEMO HERE

Answer 3

您可以使用元素邊框：

li{ 
    list-style : none; 
} 
li:after{ 
    border-radius: 50%; 
    height: 150px; 
    width: 150px; 
    line-height: 24px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    background: red; 
    border: 10px solid blue; 
} 

https://jsfiddle.net/1nm6gr6y/