css漸變
阿新 • • 發佈：2018-06-25
改變 body lin 也會 rgb code family wid 兼容性
css漸變
漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩的過渡（過渡是指顏色的過度）
兼容性
IE chrome FireFox Safari Opera
10+ 26+ 16+ 6.1+ 12.1+
10.0-webkit- 3.6 -moz- 5.1 -webkit- 11.6 -0-
線性漸變（Linear Gradients）屬性
是沿一根軸線改變顏色，從起點到終點顏色進行順序漸變（從一邊拉向另一邊）
語法：background:linear-gradient(direction,color-stop1,color-stop2,...);
線性漸變-從上到下（默認）--不需要指定方向
語法：background:linear-gradient(color-stop1,color-stop2,...);
線性漸變-從做到右
background: -webkit-linear-gradient( begin-direction,red,blue,greenyellow);
background: -moz-linear-gradient( end-direction,red,blue,greenyellow);
background: -o-linear-gradient( end-direction,red,blue,greenyellow);
background: linear-gradient(to end-direction,red,blue,greenyellow);（標準寫法）
註：隨著瀏覽器版本不斷更新，兼容性也會有所變化，並會越來越好，
如：-moz-linear-gradient在火狐3.6-15版本中，方向指目標防線，新版指開始方向，
並兼容了漸變的標準寫法，所以建議用標準寫法
線性漸變-對角
background: -webkit-linear-gradient(begin-level begin-vertical,red,blue,greenyellow);
background: -moz-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: -o-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: linear-gradient( to end-level end-vertical,red,blue,greenyellow);（標準寫法）
線性漸變-使用角度
語法：background:linear-gradient(angle,color-stop1,color-stop2,...);
角度說明 0deg 從下到上的漸變 90deg從做到右
線性漸變-顏色結點
background:linear-gradient(color1 length|percentage,
color2 length|percentage,
......
);
/*10%是純紅色，從10%到15%從紅色漸變成橘色，最後一個如果是90%，那麽從90%到100%之間就是純粹的violet色，
因為indigo 80%violet需要大於80%才會有漸變效果*/
/*註：最後一個顏色如果不寫默認是100%，第一個顏色如果不寫默認是0%*/
background: -webkit-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -moz-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -o-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
透明漸變
/*rgba第四個值是阿爾法值，如果是0，代表透明度為0，如果是1，透明度100%*/
/*第二個rgba代表位置到50%，透明度達到90%*/
background: -webkit-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,.9),rgba(255,0,0,1));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>線性漸變-從上到下（默認情況）</title> <style type="text/css"> div{ width: 500px; height: 300px; /*從上到下*/ /*background: -webkit-linear-gradient(red,blue,greenyellow);*/ /*background: -moz-linear-gradient(red,blue,greenyellow);*/ /*background: -o-linear-gradient(red,blue,greenyellow);*/ /*background: linear-gradient(red,blue,greenyellow);*/ /*從左到右*/ /*background: -webkit-linear-gradient( left,red,blue,greenyellow);*/ /*background: -moz-linear-gradient( right,red,blue,greenyellow);*/ /*background: -o-linear-gradient( right,red,blue,greenyellow);*/ /*background: linear-gradient(to right,red,blue,greenyellow);*/ /*對角線*/ background: -webkit-linear-gradient( left top,red,blue,greenyellow); background: -moz-linear-gradient( right bottom,red,blue,greenyellow); background: -o-linear-gradient( right bottom,red,blue,greenyellow); background: linear-gradient(to right bottom,red,blue,greenyellow); } </style> </head> <body> <div></div> </body> </html>
css漸變