使用CSS实现的平面阴影进度条效果

本来只是想做个简单的两色平面进度条的，结果误打误撞做出了个平面阴影效果，感觉效果完爆之前的构想图，简直是惊喜！！

整体效果如下：

整体设计方面，主要照顾到的是HTML文档的语义性，即使在不使用CSS和JS时也能够保证文档可以理解。元素使用<span>语义性也较强，使用了两层嵌套结构，外层可理解为全百分比（即100%），内层则可理解为当前百分比。

HTML代码如下：

<ul>
	<li>HTML
		<span class="sklevel"><span>0.80</span></span>
	</li>
	<li>CSS
		<span class="sklevel"><span>0.85</span></span>
	</li>
	<li>JavaScript
		<span class="sklevel"><span>0.75</span></span>
	</li>
	<li>Python
		<span class="sklevel"&g