Css實現背景漸變

一、漸變

漸變是css3當中比較豐富多彩的乙個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少的使用數量，並且具有很強的適應性和可擴充套件性。

二、線性漸變

線性漸變指沿著某條直線朝乙個方向產生漸變效果

div    /*從右到左*/

div   /*從左到右*/
div  /* 瀏覽器預設值 */ 
div     /*從下到上*/

div   /* 到右下角 */

div      /* 到右上角 */
div    /* 到左下角 */
div       /* 到左上角 */

角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將建立乙個從下到上的漸變，90deg 將建立乙個從左到右的漸變。

div

徑向漸變不同於線性漸變，線性漸變是從「乙個方向」向「另乙個方向」的顏色漸變，而徑向漸變是從「乙個點」向四周的顏色漸變

語法：background: radial-gradient(center, shape, size, start-color, ..., last-color);

說明：center：漸變起點的位置，可以為百分比，預設是圖形的正中心。shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。預設為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。size：漸變的大小，即漸變到**停止，它有四個值。closest-side``：最近邊； farthest-side：最遠邊；closest-corner：最近角；farthest-corner：最遠角

例項：多顏色均勻分布 

div  

div

div

div 

div

size指定了漸變的大小，即漸變到**停止，它有四個值。closest-side：最近邊；farthest-side：最遠邊；closest-corner：最近角；farthest-corner：最遠角

div 

div 
div 
div

div

重複徑向漸變

div

css3實現背景漸變

一 線性漸變 詳細 在css3中，可以使用 linear gradient實現背景線性漸變。linear gradient to left right top bottom 在ff瀏覽器時需要將樣式 書寫成 moz linear gradient chrome瀏覽器時需要寫成 webkit line...

使用css實現漸變色背景

線性漸變 放射性漸變 語法 linear gradient to bottom,colorstrat,colorend 引數含義 第乙個引數指定 漸變的方向 to bottom 從上至下 to bottom right 從左上至右下 to right 從左至右 to up right 從左下至右上 ...

css實現背景漸變色效果

webkit核心的瀏覽器，例如 chrome，safari等 background webkit gradient linear,0 0,0 100 from 000000 to ffffff 第乙個引數表示漸變型別 type 可以是linear 線性漸變 或者radial 徑向漸變 第二個引數和第...