這篇文章主要介紹CSS如何實(shí)現(xiàn)漸變效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

10年積累的成都網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有仙居免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

線性漸變( linear-gradient )

background-image: 
linear-gradient(to 方向, 開始顏色, 中間顏色1, 中間顏色2, ... , 結(jié)束顏色 );

四個方向的組合-八個方向
top, right, bottom, left

角度
90deg

徑向漸變( radial-gradient )

background-image: 
radial-gradient(大小 形狀 at 方向, 開始顏色, 中間顏色1, 中間顏色2, ..., 結(jié)束顏色 );

大小 : 圓半徑一個值 或者 橢圓半長軸和半短軸兩個值
百分比 / 像素

形狀

circle
ellipse

方向
百分比 / 像素

closest-side/closest-corner/farthest-side/farthest-corner

background-image: radial-gradient(800px circle at 50% 50%, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);

以上是“CSS如何實(shí)現(xiàn)漸變效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：CSS如何實(shí)現(xiàn)漸變效果-創(chuàng)新互聯(lián)
本文鏈接：http://chinadenli.net/article18/eccgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、虛擬主機(jī)、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、定制開發(fā)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)