html中背景条纹效果,纯css3实现条纹背景方法（水平，垂直，倾斜）

以上这些并不是背景图，而是由CSS样式代码实现。在现代标准浏览器中，我们通过CSS3的两个属性，一个是linear-gradient，即线性渐变，另一个是background-size，用来确定渐变的尺寸，就能显示出不同方向的条纹效果。今天我们就来详解CSS制作Web页面条纹背景样式的技巧，需要的朋友可以参考下。

1、横向条纹background: linear-gradient(#fb3 20%, #58a 80%)

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条。接下来可以通过设置背景的大小，让背景高度变小并且背景默认为repeat，从而出现条纹状background: linear-gradient(#fb3 50%, #58a 50%);

background-size: 100% 30px;

我们可以不设定第二个颜色的起始位置，设置为0，则浏览器默认为接着上一个颜色开始：background: linear-gradient(#fb3 30%, #58a 0);

background-size:100% 30px;

这样就形成了一个黄色占30%蓝色占70%的条纹状背景，也可以设置多种颜色，下面设置了三种颜色的条纹：background: linear-gradien