径向渐变未按预期工作

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 而没有 image/SVG

这是一个working fiddle

Answer 1

你可以这样做：

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 2

这个怎么样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 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/

径向渐变未按预期工作

Radial-gradient not working as expected

html

css

css-gradients