小編給大家分享一下怎么用CSS3中的gradient屬性做出背景漸變效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、歷城ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的歷城網(wǎng)站制作公司

瀏覽器支持兩種類型的漸變：

linear,用linear-gradient()函數(shù)定義,

radial,用radial-gradient()函數(shù)定義.

使用過程中注意瀏覽器的兼容問題

Safari，Chrome：-webkit-linear-gradient

Firefox：-moz-linear-gradient

IE：-ms-linear-gradient

Opera：-o-linear-gradient

本篇文章將以Chrome瀏覽器為例進行講解

線性漸變

要創(chuàng)建線性漸變，將起點和方向設(shè)置為角度，還要定義顏色停止必須指定至少兩個停止顏色。

從頂部到底部的線性漸變

div{

/*倒退*/

width:200px;

height:200px;

background-color:#1a82f7;

background-repeat:repeat-x;

background:-webkit-linear-gradient(top,#2F2727,#1a82f7);

}

從左到右的漸變過程

div{

/*倒退*/

width:200px;

height:200px;

background-color:#1a82f7;

background-repeat:repeat-x;

background:-webkit-linear-gradient(left,#2F2727,#1a82f7);

}

看完了這篇文章，相信你對“怎么用CSS3中的gradient屬性做出背景漸變效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！