1、這種特殊效果是如何實(shí)現(xiàn)的呢現(xiàn)在由我來(lái)向大家介紹一下在css3中如何使用transition屬性和hover屬性實(shí)現(xiàn)div顏色漸變和放大縮小的效果css3中transition屬性transition屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于四個(gè)過(guò)度屬性，分別是transitionproperty，transitionduration，transitiontimingfunction和transitiondelaytransition；14CSS中顏色設(shè)置方法在我們的顯示屏中，一個(gè)像素點(diǎn)由三原色構(gòu)成，分別為紅綠藍(lán)然而在計(jì)算機(jī)中使用0255來(lái)表示某個(gè)原色的不同程度，在二進(jìn)制中，可以使用八位二進(jìn)制0000000011進(jìn)行表示在十六進(jìn)制中用00ff表示那么紅色0255，綠色0255，藍(lán)色0255三原色；弄一個(gè)透明漸變的PNG覆蓋在你的圖片或者div上方即可如果IE，你也可以用濾鏡，或者VML如果FF，你可以用Canvas，或者SVGPNG則是通用的IE7+，F(xiàn)F，Opera，Chrome但對(duì)于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瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)用CSS實(shí)現(xiàn)了按鈕中間白四周黑，上方白下方灰的效果；我們平時(shí)在瀏覽web網(wǎng)頁(yè)的時(shí)候會(huì)見(jiàn)到這樣一種情況當(dāng)鼠標(biāo)懸停的某個(gè)區(qū)域的時(shí)候，該區(qū)域的形狀會(huì)在指定時(shí)間內(nèi)進(jìn)行放大或者縮小的變化，甚至在變化大小的同時(shí)會(huì)出現(xiàn)顏色的漸變這種特殊效果是如何實(shí)現(xiàn)的呢現(xiàn)在由我來(lái)向大家介紹一下在css3中如何使用transition屬性和hover屬性實(shí)現(xiàn)div顏色漸變和放大縮小的效果；html中將背景顏色漸變步驟如下1先使用一個(gè)div標(biāo)簽2然后在header標(biāo)簽里面設(shè)置ltdiv標(biāo)簽的css樣式3顏色漸變要有一個(gè)范圍，需要給div設(shè)定width和height，也就是寬度和高度4然后設(shè)定div的background背景屬性，如圖所示，背景顏色漸變就用到webkitlineargradient5接著，在webkitlinear；首先，lineargradient函數(shù)是你的調(diào)色板上的第一把刷子它能繪制出從一端到另一端的線性漸變，只需設(shè)定漸變的方向起始和結(jié)束色彩想要變幻莫測(cè)的背景過(guò)渡試試這樣的代碼示例background lineargradientto right， red， blue 這就像在畫(huà)布上輕輕一抹，紅色漸變至藍(lán)色，視覺(jué)效果驚艷而第；3設(shè)置字體和文字顏色可以通過(guò)CSS的color屬性來(lái)實(shí)現(xiàn)4css設(shè)置文本框輸入字體顏色直接設(shè)置placeholder的字體顏色為紅色就行可以了5如圖，先在HTML網(wǎng)頁(yè)編寫(xiě)一些測(cè)試的文字然后在網(wǎng)頁(yè)預(yù)覽文字初始的字體效果，顏色是黑色，大小比較小因?yàn)闇y(cè)試文字是在body標(biāo)簽內(nèi)的，所以我們要對(duì)body標(biāo)簽設(shè)置css屬性就。

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

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