线性渐变linear-gradient运用——条纹背景

@(CSS)[笔记]

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)，这里主要是讲线性渐变linear-gradient的使用，参考了大漠大神的技术博客CSS3 Gradient 和菜鸟教程的CSS3 渐变Gradients

CSS3的线性渐变linear-gradient用法就不多介绍了，详情参考上面的博客和教程。
最简单的使用就是（方向，color1，color2）意思是在某个方向位置开始，颜色从color1渐变到color2

上一周图书馆借了一本《CSS揭秘》，看了一半收获很大，《CSS揭秘》介绍了很多CSS方面上的技巧，其中有一个就是背景条纹，使用CSS线性渐变和background-size完成的效果，两者的结合得到的效果很强大。

在设计网页的时候，经常会使用到条纹背景，或者条纹特效；通常的做法是使用图片或者SVG来取代图片，但是不管使用二者哪一个都会使HTTP请求增加，这是我们不想见到的。在今天的话使用CSS3是可以解决条纹背景的问题的。

css线性渐变

.line1 {
    background: linear-gradient(#fb3,#58a);
}

容器顶部和底部分别填充#fb3,#58a实色，正真的渐变只有中间的60%

.line2 {
    background: linear-gradient(#fb3 20%,#58a 80%);
}

设置50%的话，就看不到渐变了

.line3 {
    background: linear-gradient(#fb3 50%,#58a 50%);
    background-size: 100% 30px;
}

不等宽条纹

.line4 {
    background: linear-gradient(#fb3 30%,#58a 30%);
    background-size: 100% 30px;
}

垂直条纹

.line5 {
    background: linear-gradient(to right,#fb3 50%,#58a 0);
    background-size: 30px 100%;
}

45°条纹

.line6 {
    background: linear-gradient(45deg,#fb3 50%,#58a 0);
    background-size: 30px 30px;
}

45°条纹2

.line7 {
    background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
    background-size: 30px 30px;
}

45°条纹3(重复线性渐变repeating-linear-gradient)

.line8 {
    background: repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a 0,#58a 30px);
}

三色条纹

.line9 {
    background: linear-gradient(#fb3 33.33%,#58a 0,#58a 66.66%,yellowgreen 0);
    background-size: 100% 30px;
}

同色系条纹

.line10 {
    background: repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px);
}

同色系条纹（运用半透明色）

.line11 {
    background: #58a;
    background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,0.1),
        hsla(0,0%,100%,0.1) 15px,
        transparent 0,transparent 30px);
}

简单的效果图：

具体的效果在之后的作品中更新