主要使用的屬性 linear-gradient

 background:linear-gradient(#000,#ccc); 

Paste_Image.png

取消中間的漸變過度

  background:linear-gradient(#000 50%,#ccc 50%);

Paste_Image.png

如果多個色標(biāo)具有相同的位置值(就是顏色后面跟的百分比),他們會產(chǎn)生一個無限小的過渡區(qū)域，過渡的起止色分別是第一個和最后一個指定值，從效果上看，顏色會在那個位置突然變化，而不是一個平滑的漸變過程

通過background-size來調(diào)整尺寸

  background:linear-gradient(#000 50%,#ccc 50%);
  background-size:100% 30px;

Paste_Image.png

應(yīng)為背景色默認(rèn)是repeat的，所以會出現(xiàn)斑馬條紋

不等寬條紋

  background:linear-gradient(#000 30%,#ccc 30%);

Paste_Image.png

這個后面的30%為什么會占用這個30px高度的百分之70%（我的理解是后面的這個30%代表的是從這個位置，一直到100%都是使用這個顏色)

另外一種寫法background:linear-gredient(#000 30%,#ccc 0); 這個后面的‘0’的解釋是:如果某個色標(biāo)的位置值比整個列表中在它前面的色標(biāo)的位置值都要?。ň褪沁@個0是比它前面的所有百分比都?。?，則該色標(biāo)的位置值會被設(shè)置為它前面最大的位置值的最大值（就是這個0其實現(xiàn)在等于30%），如果是這樣的(#000 20%,#ccc 40%,#ffa 0)，那這個0就是40%

垂直條紋

  background:linear-gradient(to right,#000 50%,#ccc 0);
  background-size:30px 100%;

Paste_Image.png

斜向條紋

  background:linear-gradient(45deg,#000 50%,#ccc 0);
  background-size:30px 30px;

Paste_Image.png

這個辦法行不通，原因是我們只是把每個貼片旋轉(zhuǎn)了45deg（就是30*30的背景），而不是把整個背景都旋轉(zhuǎn)了。如果要做成斜向條紋，我們要為貼片設(shè)置四條條紋，而不是兩條，只有這樣才有可能做到無縫拼接

Paste_Image.png

  linear-gradient(45deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0)
  background-size:30px 30px;

Paste_Image.png

如果給中間加上一個白色的框，就可以出現(xiàn)條紋背景的效果了

<div class="wrap">
  <div class="fff"></div>
</div> 
  .wrap{width:200px;height:300px;background:linear-gradient(45deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0);background-size:30px 30px;padding:10px;box-sizing:border-box;}
.fff{width:180px;height:280px;background:#fff;}

信封效果

更好的斜向條紋

前面展示的方法其實不夠靈活，如果我們需要的不是45度的條紋怎么辦，如果直接改45這個數(shù)字，就是出現(xiàn)下面的效果

  background:linear-gradient(60deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0);
  background-size:30px 30px;

都沒眼看了

這里要介紹一個加強版的線性漸變 repeating-linear-gradient()，其實它的工作方式和前面的一樣，只是有一點不同：色標(biāo)是無限循環(huán)重復(fù)的，直到填滿整個背景。

  background:repeating-linear-gradient(45deg,#000,#ccc 30px);
  /*background-size:30px 30px;(不需要加background-size了)*/

Paste_Image.png

改寫一下

  background:repeating-linear-gradient(45deg,#000,#000 15px,#ccc 0,#ccc 30px)

這里的前兩個色標(biāo)我的理解是（#000從左下角走15個像素），后面兩個色標(biāo)（#ccc從15px一直到30px）,下面是最終效果

Paste_Image.png

  /*如果需要更改角度*/
   background:repeating-linear-gradient(60deg,#000,#000 15px,#ccc 0,#ccc 30px)

Paste_Image.png