1、這種特殊效果是如何實現(xiàn)的呢現(xiàn)在由我來向大家介紹一下在css3中如何使用transition屬性和hover屬性實現(xiàn)div顏色漸變和放大縮小的效果css3中transition屬性transition屬性是一個簡寫屬性，用于四個過度屬性，分別是transitionproperty，transitionduration，transitiontimingfunction和transitiondelaytransition；14CSS中顏色設(shè)置方法在我們的顯示屏中，一個像素點由三原色構(gòu)成，分別為紅綠藍然而在計算機中使用0255來表示某個原色的不同程度，在二進制中，可以使用八位二進制0000000011進行表示在十六進制中用00ff表示那么紅色0255，綠色0255，藍色0255三原色；弄一個透明漸變的PNG覆蓋在你的圖片或者div上方即可如果IE，你也可以用濾鏡，或者VML如果FF，你可以用Canvas，或者SVGPNG則是通用的IE7+，F(xiàn)F，Opera，Chrome但對于IE6及以下不支持PNG透明，需特別處理用濾鏡或VML。

2、lthtml lthead ltmeta charset=quotUTF8quot lttitlelttitle ltstyle type=quottextcssquot demo width200pxheight10pxbackgroundwebkitlineargradientleft， rgb80，80，255，02 ， #fff * Safari 51 60 * background olineargradientleft， rgb80，80，255，0；新建html文件，例如indexhtml2在indexhtml中的ltstyle標(biāo)簽中，輸入css代碼buttonwidth100pxheight50pxborder0colorwhitebackgroundwebkitradialf，#545c64 3瀏覽器運行indexhtml頁面，此時用CSS實現(xiàn)了按鈕中間白四周黑，上方白下方灰的效果；我們平時在瀏覽web網(wǎng)頁的時候會見到這樣一種情況當(dāng)鼠標(biāo)懸停的某個區(qū)域的時候，該區(qū)域的形狀會在指定時間內(nèi)進行放大或者縮小的變化，甚至在變化大小的同時會出現(xiàn)顏色的漸變這種特殊效果是如何實現(xiàn)的呢現(xiàn)在由我來向大家介紹一下在css3中如何使用transition屬性和hover屬性實現(xiàn)div顏色漸變和放大縮小的效果；html中將背景顏色漸變步驟如下1先使用一個div標(biāo)簽2然后在header標(biāo)簽里面設(shè)置ltdiv標(biāo)簽的css樣式3顏色漸變要有一個范圍，需要給div設(shè)定width和height，也就是寬度和高度4然后設(shè)定div的background背景屬性，如圖所示，背景顏色漸變就用到webkitlineargradient5接著，在webkitlinear；首先，lineargradient函數(shù)是你的調(diào)色板上的第一把刷子它能繪制出從一端到另一端的線性漸變，只需設(shè)定漸變的方向起始和結(jié)束色彩想要變幻莫測的背景過渡試試這樣的代碼示例background lineargradientto right， red， blue 這就像在畫布上輕輕一抹，紅色漸變至藍色，視覺效果驚艷而第；3設(shè)置字體和文字顏色可以通過CSS的color屬性來實現(xiàn)4css設(shè)置文本框輸入字體顏色直接設(shè)置placeholder的字體顏色為紅色就行可以了5如圖，先在HTML網(wǎng)頁編寫一些測試的文字然后在網(wǎng)頁預(yù)覽文字初始的字體效果，顏色是黑色，大小比較小因為測試文字是在body標(biāo)簽內(nèi)的，所以我們要對body標(biāo)簽設(shè)置css屬性就。

3、使用漸變色background lineargradientto right左右到右，寫為bottom就是從上到下， 開始的顏色，結(jié)束的顏色；1打開html開發(fā)工具，新建一個html文件在html代碼頁面創(chuàng)建一個p并給這個標(biāo)簽添加一個類名linear2然后為類設(shè)置樣式在title后面創(chuàng)建一個style標(biāo)簽，然后在這個標(biāo)簽里面設(shè)置linear類的高漸變lineargradient的樣式，這里的第一個參數(shù)是設(shè)置漸變的方向，后面兩個參數(shù)是起始顏色和終止顏色設(shè)置好；1 borderimage利用CSS的borderimage屬性，可以快速設(shè)置漸變邊框，代碼簡潔，示例如下CSS盡管簡單，但此方法不支持borderradius設(shè)置，接下來我們將探討支持該屬性的解決方案2 使用backgroundimage和疊加盒子通過設(shè)置兩個盒子，一個背景為漸變色，一個為純色，這種方法兼容性好，但borderradius處理。

4、1首先，打開html編輯器，新建html文件，例如indexhtml2在indexhtml中的ltstyle標(biāo)簽中，輸入css代碼divwidth200pxheight150pxbackgroundlineargradientred，white 3瀏覽器運行indexhtml頁面，此時td中的div的背景顏色從紅色到白色漸變；1首先在桌面新建一個文件夾，然后新建兩個text文件分別將text文件重命名為indexhtml和csscss2用記事本打開indexhtml文件，輸入以下代碼3用瀏覽器打開瀏覽效果4編輯indexhtml，在p標(biāo)簽內(nèi)輸入以下代碼fontcolor=quot#008252quot字體顏色的不同設(shè)置方法font5瀏覽器瀏覽效果，這樣就；4使用transition屬性，可以設(shè)置css屬性的漸變，本例中transitionbackgroundcolor3seasein0s語句的意思是要漸變的屬性為backgroundcolor漸變過程持續(xù)3s漸變的方式為easein延遲0s后開始漸變5首先，打開html編輯器，新建html文件，例如indexhtml，填寫問題基礎(chǔ)代碼在；html中讓背景顏色漸變步驟如下1打開html開發(fā)工具，新建一個html文件2在html代碼頁面創(chuàng)建一個ltdiv并給這個標(biāo)簽添加一個類如linear如圖代碼ltdiv class=quotlinearquotltdiv3為類設(shè)置樣式在lttitle后面創(chuàng)建一個ltstyle標(biāo)簽，然后在這個標(biāo)簽里面設(shè)置linear類的高漸變lineargradient。