box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;
background: #fafafa;
}
如上,果不其然,实现了灰色背景的平铺.但是,所有的盒子都有了这个平铺的灰色背景.我们需要实现的是间隔变色,而不是全部变成灰色的背景.
怎么办?难道我需要去给.floor再加上一个样式????
不需要,强大的css再一次雄起了!!
我把代码改成了如下:
CSS Code复制内容到剪贴板
.home {width: 1200px;margin: 0 auto;}
.floor {padding: 20px 0;height: 500px;width: 1200px;}
.floor:nth-child(2n){
box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;
background: #fafafa;
}
OK,完美实现效果.
思考
这个不是100%的平铺的,而是宽度是有限的.这样,在足够高的分辨率下面,可能会产生问题哦.
但是,以我的例子来说,1200*3 = 3600 这样的宽度,足够胜任目前99.999%的显示器了.剩下部分用4K的土豪,我相信也不会在这样高分辨率的显示器上全屏看网页.所以,这样写是没有问题的呀!!
但是,我们是讲求完美的么.哪怕是百万份之一的人会这样做,也不能露怯呀.但是,我们的box-shadow是万能的呀…我们再来改一下代码:
CSS Code复制内容到剪贴板
.home {width: 1200px;margin: 0 auto;}
.floor {padding: 20px 0;height: 500px;width: 1200px;}
.floor:nth-child(2n){
box-shadow: 1200px 0 #fafafa,2400px 0 #fafafa,-1200px 0 #fafafa,-2400px 0 #fafafa;
background: #fafafa;
}
改成这样之后,就是 1200*5 = 6000 这样的宽度,足够再战10年~~~
小结
CSS,真强大!!
本文由FungLeo原创
首发地址:http://blog.csdn.net/FungLeo/article/details/51661222
