Jan
18
捣鼓 wordpress 时，发现系统里的星级评分的设计方式挺新奇也挺实用，特别是在图床挂掉时还能保持色块指示，在可访问性方面要比普通方法做的更好。
视点:
中部镂空，周围用背景色覆盖的背景图是这个设计的亮点，正好和常规背景图设计相反，很有想法。
将此图放大，可以看的更明白些：
正常状态：
设置其他颜色和透明度：
这种设计的好处在于
- 可维护性：方便星星的颜色定制，方便换肤
- 可访问性：图床挂掉时还有背景色做保障，CSS 未加载也能通过内部文字体现涵义
不过原文没有考虑 CSS 未能加载的状况（用的是内嵌图片，没有涵义），html结构也有些复杂，还有很大的优化空间：
优化：
1.综合考虑之后，先将几个五星背景图合并为一个
2.再用三个 inline 标签就可以做好一个极具可访问性的星级评分结构：
<span class="rating-holder">
<!--加入默认分数，保证残障用户可以理解评分内容-->
<em class="rating-score" style="width:50%">(2.5分)</em>
<em class="rating-star"></em>
</span>
效果与多种情况下的可访问性演示：Demo
此法维护性也甚好，不仅可用纯色，还可设置渐变效果，只要背景图和渐变色处理得当，其效果可比“纯图像”。不爽的是火狐要 3.6 版本才能使用渐变色，而 opera 还不支持 CSS 渐变，不过迟早是要支持的，提前体验一下吧：
/*不支持渐变的浏览器用纯色*/
background-color:#d4a120;
/* webkit */
background:-webkit-gradient(linear,left bottom,left top,color-stop(0.4, #d4a120),color-stop(0.7, #e6db03));
/* firefox 3.6 +*/
background:-moz-linear-gradient(center bottom,#d4a120 40%,#e6db03 70%);
/* ie5+ */
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#e6db03,endColorStr=#d4a120);
手动书写渐变代码费时费力，有了渐变代码生成器，好多了，比如
一些参考文献：
no comment untill now