工作中難免遇到某些小項目中沒有設計的情況，這對于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%); }

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

轉載于:https://www.cnblogs.com/monkeyleo/p/5531310.html

總結

以上是生活随笔為你收集整理的gradient杂谈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。