&nbs p;
一、效果抢先
您可以狠狠地点击这里： CSS 3下的 条纹 背景demo
在现代浏览器下，会有类似下面截图的些效果：
这些美丽的纹饰全部都是由CSS实现的，没有 一点 点的图片。
二、原理简述
主要是应用了两个CSS3的属性，一个是 linear-gra die nt ，即线性渐变，另外一个就是 background-size ，用来确定渐变的 尺寸 。
关于 background -s ize 的基础知识，您可以点击这里查看。
background-size 顾名思意就是背景的尺寸。如果没有 background-size 的限制，渐变背景就会从上走到下（或从左走到右），100%覆盖。好比蛋饼一样，如果你不要求的话， 老板 就会把辣椒，香菜，榨菜一并放上。
关于渐变，可以说是最老生常谈的CSS3属性了。FireFox/ opera 浏览器下的渐变使用参见“CSS渐变之CSS3 gradient在Firefox3.6下的使用”一文，Safari/Ch rom e浏览器下的渐变使用参见“CSS gradient渐变之 webkit 核心浏览器下的使用”一文。
渐变这玩意就跟photoshop中的渐变一样，尤其webk IT 核心浏览器下那个有些难搞的 color-stop ，就是下面这货了：
FireFox/O PE ra浏览器下的 颜色过渡 点直接就是百分比或是像素值，类似于上面的 color-stop 了。
回到本文实例，为了限制所有渐变图案的大小，我们 统一 将渐变尺寸限制为50像素，于是就有了demo页面中的这部分CSS代码了：
-webkit-background- Size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; /* 控制条纹的大小 */
如果没有 background-size 的限制，那么上图中的两个重复条纹就会变成下面许秀琴般纯洁的模样：
下面说说渐变的事件，那上面最 简单 的有些土黄的垂直条纹来说吧。其渐变相关的CSS代码如下：
background-color: # f90; background -i mage: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: -moz-linear-gradient(0 deg , rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
这里的条纹实现的方法是很聪明的，如果按照我们photoshop中 制作 渐变的习惯，可能相关的CSS代码 应该 是下面这样子：
background-image: linear-gradient(0deg, #ffad33 0， #ffad33 50%, #f90 50%, #f90 100%);
而这里的实现是直接关心50%中点处，设置一个透明度为20%的 白色 断点，然后直接映在背景上。不可不谓轻巧简便，重用性高。
最后，讲下最复杂的例子，就是那个黑白斜纹了，其相应的渐变代码如下：
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555)); background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
不要看上面的代码好像建楼房一样，架得老高老高。实际上是个糊着老虎年画的窗户纸——一捅就破。其实呢，就是东南，东北，西南，西北四个 方向 同时画个黑色的边角（等腰直角三角形），中间透明镂空。因为demo页面背景色是白色，所以，就会使黑白间隔效果，如果使用小bug将demo页面的背景色换一换，则就像是卸了妆的非主流——模样大变，例如，背景换成和谐的绿色：
三、其他类似实例
在先前的“ 几种 纯CSS(CSS3)下的 纸张 效果实现展示”一文中的第三部分——“带分隔线的卷纸纸张效果”处的纸张分隔线的实现也使用的类似的原理。
不过 略有不同的是那里FireFox下的实现使用的是 repeating-linear-gradient 属性， 当时 如此使用是因为FireFox3.6之前的版本还不支持 background-size 属性，不过现在此问题已成往事，所以，直接应用 background-size 属性也是妥妥的。
您如果有兴趣可以轻轻地点击这里：带分隔线的卷纸纸张效果demo
四、结语
在CSS2的时候，就那么点属性，我们还可以实现很多很赞的效果。而CSS3有那么多令人欣喜若狂的属性，很显然的，各种CSS3下的相关技 术 必定雨后春笋般大量出现，以后的web就是只要想不到，没有做不到的效果。本文的这个条纹效果可以说是最最简单的相关应用了。我们只要稍微再发散下，可以实现很多其他更精妙的东西。例如，木纹质感的背景，或是金属质感的背景——完全CSS实现！这就看你的 创造 力有多少了！CSS3的时代即将迈入，很多技术都是空白，这真是我们前端er的机遇，首创某些新技术的机遇。
参考 文章 ：Checkerboard, striped & other background patterns with CSS3 gradients
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip:CSS3下条纹&方格斜纹背景的实现 全部内容，希望文章能够帮你解决 html5教程-小tip:CSS3下条纹&方格斜纹背景的实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip:CSS3下条纹&方格斜纹背景的实现的详细内容...