技巧解析——不一样的进度条

我们在日常开发中，特别是在一些数据统计页面中，经常会看到一些占比数据以进度条的形式展示。但是在页面设计之初，设计师提供的设计稿上可能只包含比较美观的静态效果，而这些效果放到真实场景的时候往往存在一些意向不到的问题（这里不是说设计师没做好，而是真实场景变数太多）。举个例子：

如图，我们看设计稿是很清晰的，但当真实数据占比超过50%之后（右边部分），你会发现，中间的数字识别度严重降低，几乎不可识别，这样的体验显然是不可忍受的。因此，我们需要想办法应对这样的情形。

其实，比较容易想到的解决方法是中间的文字选择一种在两种背景颜色中都能很好识别的颜色值就可以应对这种问题。但是这回带来一些问题：

复用性降低，当该进度条移植到另一个模块修改了进度颜色，又需要寻找另一个文本颜色

可能打破设计规则，文本颜色，很可能是在页面设计标准颜色之外的颜色，可能破坏整个页面的设计感

于是，聪明的前端开发工程师们开始发挥他们的天赋。比较传统的解决方案是，当进度超过文本后，重叠部分的文本使用另一种颜色，这个方案可以一定程度避免出现第二个问题。我们来看一看实现方式：

然后，给这个结构添加CSS样式：

最终显示效果如下：

如图，进度和文本重叠部分的文本颜色明显加深，识别度提升明显。

这是一个比较传统的处理方式，除了圆角（非必须）没用到HTML5或CSS3的什么新特性。因此，这种处理方式的兼容性比较好，也因此被广泛使用。

另外，日益强大并被普及的CSS3，怎么可能不给这种常见场景提供更加便利的解决方式？接下来我们来看一看神奇的实现方式：

增加CSS样式如下：

注意其中的，此例取值为，而它本身的可取值包括：、、、、、、、、、、、、、、、、、。有兴趣的小伙伴可以挨个试一试。

现在的效果看起来如图：

虽然很强大，但是我总觉得它的设计有一些问题，比如，他会和它的父及、祖及，总而言之先辈元素的内容和背景色进行混合运算，如果在祖先元素中本身带有背景颜色设置，那么此处的混合结果比较难控制。

最后，放一个演示DEMO：http://seejs.me/mtest/demos/mix.html。