[英]Radial-gradient not working as expected
我希望仅使用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>
但是这段代码并没有给我完美的结果,我在另一个圆的中间得到一个圆,但是内部圆的边缘变得模糊了。 我希望内圆也成为一个完美的圆,并且没有任何模糊的边缘。 这些问题有解决方案吗?
PS:我只想使用CSS,而不要使用图像/ SVG
这是一个工作的小提琴
你可以这样做:
的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%);
}
怎么样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 */
}
您可以使用元素边框:
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.