I’m only questioning Firefox at this time since I’m focusing on -moz.
Why are there some many syntax variations for radial gradients?
In the code below 2 of the 3 background image properies work. The -moz prefix and the first non -moz syntax is different, but still seem to produce the same result. The second non -moz has the same syntax as the -moz but doesn’t render results.
Should I just pick one that works and move on? Why such subtle variations? Especially that one non -moz works and one doesn’t?
background-image: -moz-radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%);
background-image: radial-gradient(circle farthest-corner at 45px 45px , yellow 0%, orange 100%);
background-image: radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%);
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
#icons li{
float: left;
list-style: none;
margin-right: 10px;
}
#icons a{
display: block;
position: relative;
text-indent:-9999em;
}
#icons a:before, #icons a:after{
content: "";
display: block;
position: absolute;
}
.circleBg{
/*background-image: -moz-radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%, red 95%);*/
background-image: radial-gradient(circle farthest-corner at 45px 45px , yellow 0%, orange 100%);
/*background-image: radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%);*/
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
height: 56px;
width: 56px;
}
</style>
</head>
<body>
<ul id="icons">
<li><a class="circleBg" href="#">Circle Background</a></li>
</ul>
</body>
</html>