巧用CSS3之background渐变

常见斑马loading

上图是我们常见的loading进度条，以前都是用一张背景图片平铺的。其实如果抛去兼容性因素，我们可以用零图片纯样式来实现。

一，首先，我们先为容器定义一个纯蓝色背景：

box{ padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft Yahei", Simsun; font-size: 17px;">二，绘制条纹。

我们可以用linear-gradient来绘制条纹。在本例中，可以用半透明的白色背景来实现。

绘制条纹

box{background-image:linear-gradient(rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}

这样就形成了四等分的条纹，但这显然不是我们想要的结果。​

三，设定倾斜角度。

​linear-gradient是可以设定倾斜角度的。

box{background-image:linear-gradient(45deg, rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}​

​这样貌似达到了我们的预期？其实不是的，现在是无论进度条有多宽，都是百分百填充，视觉上看到的都是四等分。当宽度变短时，同样是四等分，只是每一份都变窄了。

四，​设置固定尺寸

我们可以将原来背景图的相对宽度变成纯对尺寸。通过background-size来实现

​box{background-size:40px 40px}// 这里的值视实际情况而定。

这样，无论进度条宽度发生任何变化，都不会影响斑马条纹了。

如果想看实际的线上效果，​狠戳 http://loading.io/

另外，转载一篇瑶姐的关于backgound的文章：http://blog.doyoe.com/2016/04/11/css/background系列之无处不在的妙趣/#more

其实，只要敢于打破常规，​脑洞大开，就可以写出优雅，健壮，适应性强的代码。