閱讀CSS Secrets（四）

使用CSS製作條紋背景圖

prerequisites
CSS linear gradients,background-size

<div class=d1></div>
.d1{
  width:200px;
  height:150px;
  background:linear-gradient(#fb3,#58a)
}

background的顏色從#fb3漸變到了#58a

當我們給顏色後面加百分比後，

div{
  width:200px;
  height:150px;
  background:linear-gradient(#fb3 20%,#58a 80%)
}

上下部分均為單一顏色，從高度20%-80%裡是漸變色

當百分比都為50%時，即為突變

div{
  width:200px;
  height:150px;
  background:linear-gradient(#fb3 50%,#58a 50%)
}

這裡可以解釋為 顏色從 百分比1 到 百分比2的部分是漸變顏色，其他部分是單一顏色。
漸變色背景可以被看成背景圖片來使用，比如加入一個background-size

div{
  width:200px;
  height:150px;
  background:linear-gradient(#fb3 50%,#58a 50%);
  background-size:100% 30px;
}

一開始我在想為什麼backgroun-size加了100% 30px怎麼變成這樣了？？ 難道是100%高度 然後以30px為分成塊？
。。後來測試之後明白 100%為寬度 30px為高度， 而做為背景圖片 自動repeat平鋪鋪滿。。

當然可以使用3種顏色的條紋，即在linear-gradient後面再多加一條顏色，不過這裡會麻煩一點

div{
  width:200px;
  height:150px;
  background:linear-gradient(#fb3 33%,#58a 0,#58a 66%,yellowgreen 0);
  background-size:100% 30px;
}

這裡需要取消漸變的百分比差 ，所以中間會多出一個#58a 0

垂直條紋

在linear-gradient前面加個to 方向，然後更改background-size後

.d1{
  width:200px;
  height:150px;
  background:linear-gradient(to right,#fb3 33%,#58a 0,#58a 66%,yellowgreen 0);
  background-size:30px 100%;
}

對角線條紋

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

然而效果是這樣的，並不是斜對角條紋啊！！而是好多格子

難道是background-size 30px 30px 所以成這樣了嗎
然後我改成 100% 100%，咦 好像這樣也是錯的！！！為什麼這樣

原因在於,我們只是旋轉45度的梯度在每個瓷磚,不是重複背景作為一個整體。。。整體！！

當顏色區塊變多時

 .d1{
      width:200px;
      height:150px;
      background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
      background-size:100% 100%;
    }

稍微比之前好看點，

把單位格子縮小時

.d1{
      width:200px;
      height:150px;
      background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
      background-size:30px 100%;
    }

為什麼相差這麼大呢
當我把background-repeat 設定為no-repeat時候，就變成這小塊，都是平鋪的效果！！

這裡CSS3提供了 更加簡單的屬性 repeating-linear-gradient 可以更好的建立單體斜角，最後面為單體的寬度

.d1{
  width:200px;
  height:150px;
  background:repeating-linear-gradient(45deg,#fb3,#58a 30px)
}

這裡還有個應對原形漸變的屬性 radial-gradient

.d1{
  width:200px;
  height:200px;
  border-radius:100px;
  background:radial-gradient(#fb3,#58a)
}

再試試repeat-radial-gradient屬性

.d1{
  width:200px;
  height:200px;
  border-radius:100px;
  background:repeating-radial-gradient(#fb3,#58a 30px)
}