gradient雜談

　　工作中難免遇到某些小項目中沒有設計的情況，這對於PS基礎薄弱的我來說非常恐怖。無奈之下，只好自己自學UI方面的知識，但對於某些能用CSS實現的背景樣式等，還是儘可能地用已經掌握的知識去實現。本文主要分享的便是我在設計背景圖片中接觸到最多的也是之前自己忽視掉的一個CSS3屬性——gradient。

　　1、linear-gradient線性漸變。其基礎的使用格式為: background: linear-gradient(red,black); 實現樣式如下：

　　可以在參數中加上漸變方向，如 background-image: linear-gradient(to right,red,black); ，實現樣式如下：

　　漸變方向也可以使用角度值，如 background-image: linear-gradient(45deg,red,black); 

　　多種背景顏色漸變，如： background-image: linear-gradient(to right,red,yellow,black); 

　　設置背景顏色開始坐標，如： background-image: linear-gradient(to right,red,yellow 25%,black 50%); 

　　無漸變， background-image: linear-gradient(to right,red 25%,yellow 25%,yellow 50%,black 50%,black 100%); 

　　2、radial-gradient徑向漸變。基礎使用格式： background-image: radial-gradient(red,black); 

　　帶參數的徑向漸變，如： background-image: radial-gradient(circle at top left,red,black); 

　　3、組合使用，如條紋背景：

background-color: red;
background: 
    linear-gradient(90deg,blue 15px,transparent 0),
    linear-gradient(90deg,black 30px,transparent 0),
    linear-gradient(90deg,yellow 45px,transparent 0);
    background-size: 45px;

　　先輸入的漸變屬性層級較高，故使用transparent讓後續使用的屬性顯示。

　　黑白磚塊，

background-color: #fff;
background-image: 
    linear-gradient(45deg,#000 7px,transparent 0),
    linear-gradient(45deg,#000 7px,transparent 0),
    linear-gradient(225deg,#000 7px,transparent 0),
    linear-gradient(225deg,#000 7px,transparent 0);
background-size:20px;
background-position: 0 0 ,10px 9px,20px 18px,10px 9px;

　　4、兩個新的屬性： repeating-linear-gradient 以及 repeating-radial-gradient 

.repeat-linear{
    background:
    repeating-linear-gradient(red,black 5%);
}
.repeat-radial{
    background:
    repeating-radial-gradient(red,black 5%);
}

　　　　以上所有代碼實現均使用高級瀏覽器，相容性問題，請自行百度。