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

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

　　　 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 　

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

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

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

　　設(shè)置背景顏色開始坐標，如：?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徑向漸變。基礎(chǔ)使用格式：?background-image: radial-gradient(red,black);?

　　帶參數(shù)的徑向漸變，如：?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讓后續(xù)使用的屬性顯示。

　　黑白磚塊，

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%); }

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

轉(zhuǎn)載于:https://www.cnblogs.com/monkeyleo/p/5531310.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。