一、水平渐变
实现水平条纹很简单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TEST</title> <style> .h100{ height: 100px; } .gra{ background: linear-gradient(#fb3 20%, #58a 80%); } </style> </head> <body> <div class="h100 gra"></div> </body> </html>
效果如下：这样的效果一般就符合现实中的效果，#fb3 20% 表示上面背景颜色和颜色所占比例
linear-gradient里面的值表示背景渐变从上至下的颜色，一般的话两种就够了，如下：
.gra{ background: linear-gradient(#fb3 20%, #58a 30%,#ccc 50%); }
还有一种情况：两个颜色区域所占的百分比都是50%或者最后一个设置为0，那么就会产生一种有意思的情况，那就是渐变区域没了，如下
实际上渐变区域是存在的，只不过是无限小。
我们还可以使用background-size实现条纹效果：
.gra{ background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 20px; }
二、垂直渐变
垂直效果的实现就有点难度了，还是那个属性：linear-gradient ，它里面有个默认的参数 to bottom，我们把它的值改成to right，background-size值颠倒，如下：
.gra2{ background: linear-gradient(to right ,#fb3 50%, #58a 50%); background-size: 20px 100%; }
三、倾斜渐变
实现倾斜渐变效果则会用到一个很偏的属性 repeating-linear-gradient 用法和linear-gradient一样
.gra3{ background: repeating-linear-gradient(45deg,#fb3,#58a 30px); }
效果如下：
其实linear-gradient也可以实现倾斜渐变的效果，只不过计算宽度有点复杂了，这里不做讨论，得不偿失
在我们实际应用中，倾斜渐变效果还是存在的，一般的话以浅色系为主，写个简单效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TEST</title> <style> html,body{ margin: 0; padding: 0; height: 100%; } .gra3{ height: inherit; background: repeating-linear-gradient(45deg,#F8F8FF,#F5F5F5 30px); } </style> </head> <body> <div class="gra3"></div> </body> </html>
颜色有点淡，没怎么选。用css实现渐变比用图片实现就显得高端多了