4.16.5　堆叠样式

何为堆叠样式？先看以下示例代码：

  1. <div class="progress">
  2.   <div class="progress-bar progress-bar-success" style="width: 35%"></div>
  3.   <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
  4.   <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
  5. </div>

上述示例的运行效果如图4-78所示。

4.16.5　堆叠样式 - 图1 图4-78　堆叠式进度条

奇怪，没有特殊的附加样式，却可以实现这么好看的效果，为什么呢？再次回到progress-bar样式的源码。

  1. // 源码4532行
  2. .progress-bar {
  3.   float: left; /* 左浮动 */
  4.    /* 这里省略了其他代码 */
  5. }

明白了吧？已经做好铺垫了，在左浮动的基础上就可以实现上述效果。不过总宽度不要超过100%。

注意

进度条依赖于CSS3的渐变、过渡和动画特性，这些都是不被IE7～IE9或较老版本的Firefox所支持的。另外IE10和Opera 12之前的版本均不支持动画特性。