list-style-gradient.html

<!DOCTYPE html>
<html>
<head>
<title>List marker gradients</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="c/style-insert-tests.css">
<style type="text/css" media="all" id="tests">

ul li {list-style: circle;}
ul li {list-style: radial-gradient(closest-side,orange,orange 60%,blue 60%,blue 95%,transparent);}

ol li {list-style: upper-alpha;}
ol li {list-style: linear-gradient(45deg, red, red 50%, orange 50%, orange);}

li:first-child {font-size: 200%;}
li {font-size: 150%;}
li:last-child {font-size: 100%;}

ol.rainbow li {list-style: radial-gradient(farthest-side at bottom right,
	lightblue, lightblue 50%, violet, indigo, blue, green, yellow, orange, red, lightblue);}
</style>
</head>
<body>


<ul>
<li>This is a list item.</li>
<li>So is this.</li>
<li>The list is unordered.</li>
</ul>


<ol>
<li>This is a list item.</li>
<li>So is this.</li>
<li>The list is ordered.</li>
</ol>


<ol class="rainbow">
<li>This is a list item.</li>
<li>So is this.</li>
<li>The list is ordered.</li>
</ol>


</body>
</html>