1、一方法一借助maskimage屬性如果您手頭上的瀏覽器是Chrome或是Safari，則您可以在demo頁面中看到類似下面的效果相應的HTML代碼如下codeh2 class=quottextgradientquot datatext=quot天賜美妞quot天賜美妞h2codebutton；1啟動DW軟件，新建一個網頁文件，在body中添加一個 標簽，然后給他一定CSS樣式，width300pxheight200pxbackground#ff0000我們可以看到填充了背景色為紅色2然后我們添加線性漸變代碼backgroundwebkitlinear；現在由我來向大家介紹一下在css3中如何使用transition屬性和hover屬性實現div顏色漸變和放大縮小的效果css3中transition屬性transition屬性是一個簡寫屬性，用于四個過度屬性，分別是transitionproperty，transitionduration。

2、html部分ltdiv class=quotboxquotltdiv css部分boxwidth 500px height 50pxbackground webkitlineargradientto right，#17c864，#3fccf0background mozlineargradientto right，#17c864，#3fcc；其次，由于用了moz前綴，所以只有運行于火狐瀏覽器才有效如果想運行于webkit內核的瀏覽器比如ChromeSafari，則改為 backgroundwebkitlineargradienttop，blue，red至于IE指低版本的，由于不支持css3，就只能。

3、需要準備的材料分別有電腦瀏覽器html編輯器1首先，打開html編輯器，新建html文件，例如indexhtml2在indexhtml中的ltstyle標簽中，輸入css代碼button width 100px height 50pxborder 0color；通過定義一系列與盒子相關的屬性，可極大地豐富和促進各個盒子乃至整個HTML文檔的表現效果和布局結構CSS盒子模型由內容區(qū)填充邊框和空白邊四部分組成內容區(qū)是盒子模型的中心，呈現盒子的主要信息內容填充是內容區(qū)和邊框；使用漸變色background lineargradientto right左右到右，寫為bottom就是從上到下， 開始的顏色，結束的顏色；1圖片漸變切圖時一定要以最小為準則，例如在做垂直方向的純顏色的漸變時，嘗試使用1個像素的豎直圖片作為漸變背景“最小單元”另外，要注意css3雖然支持很多的瀏覽器的兼容，但是目前不支持Opera瀏覽器2如果兼容程度。

4、3在testhtml文件內，直接在font標簽上，通過color屬性來設置字體的顏色例如，設置font字體的顏色為紅色4在testhtml文件內，設置font標簽的class屬性為myclass，主要用于下面通過該class來設置css樣式5在；這個為啥要用邊框呀我的天，兩個大小不同的圓進行重疊就行了，下面的黑色大點，上面的白色小點，然后在大圓的左下角，就是一個大盒子包裹一個小盒子很簡單的；詳細內容請參考 CSS中漸變特性的研究 在絕對定位的情況下，如果元素沒有設置寬度width，且設置了left和right，則元素的寬度width會被屬性left和right伸縮，即元素真實的寬度width會適合于left和right的值同樣，對于元素的；很簡單，css里設置body背景為漸變，漸變方向從左到右，兩種顏色漸變，漸變比為50%，把右邊的顏色設置為透明或白色即可；ltdiv style=quotwidth300pxheight 75pxbackgroundurlimgbackindex_22png norepeat 0 225px opacity 02backgroundsize100%quotltdiv 思路是這樣，但看著不對勁，可能是背景顏色的問題，css漸變只能；lthtml lthead ltmeta charset=quotUTF8quot lttitlelttitle ltstyle type=quottextcssquot demo width200pxheight10pxbackgroundwebkitlineargradientleft， rgb80，80，255，02 ， #fff * Safari 5；看圖，多個div疊在一起，可以達到你這個效果。