CSS3漸層，css3

CSS3漸層，css3

今天上Quora的時候，發現登陸頁面的背景圖挺帶感，就F12了一下……

學習學習CSS3的漸層效果，gradient

漸層按照表現方式分為線性漸層（linear-gradient）和蛋性漸層，哦不，是放射狀漸層（radial-gradient），重複線性漸層（repeating-linear-gradient）和重複放射狀漸層（repeating-radial-gradient）

練習檔案放在了github上  點擊開啟連結

參考資料：大漠的  線性漸層  放射狀漸層  還有張鑫旭寫的這個 點擊開啟連結

css3 漸層怎實現？

針對不同瀏覽器有不同的首碼，基本還是相似的，下面的意思是線性漸層，從上方開始，從黑色漸層到白色
-webkit-linear-gradient(top,#000,#fff);
-moz-linear-gradient(top,#000,#fff);
-o-linear-gradient(top,,#000,#fff);
也可以加一些漸層中間的顏色
-webkit-linear-gradient(top,#000,#eee 20%,#fff);
也可以使用color stop,跟上面的意思相同
-webkit-linear-gradient(top,#000,color-stop(0.2, #eee),#fff)
 
對於CSS3圓角與漸層問題

你好，ie8以下版本不支援css3圓角樣式寫法，你可以試試ie9。