background-image的衍生
漸變,用的不是很多(之間ps多好,費這事兒)
1。漸變
(按鈕的背景，線性，徑向，重複漸變)
配合background-size:30% 100%; 實現進度條填充,美滋滋
漸變語法
background-image:
取值：linear-gradient(value)---->線性
radial-gradient(v,v,v,...)--->徑向
repeating-linear-gradient(value)---->重複線性
repeating-radial-gradient(v,v,v,...)--->重複徑向
重點（線性）
background-image:linear-gradient(angle,color-point,color-point...);
angle:漸變的方向和角度 to top |to left|to bottom |to right|to bottom right (這種也可以)
(瀏覽器不同,角度的開始位置可能不同)
angle:也可取角度 1deg 180deg
color-point:就是乙個顏色和位置的組合而已
color-point:red 10%; blue 50%
徑向漸變
radial-gradient([size at position ],color-point,color-point...) 可寫可不寫
size:半徑 position:圓心
background-image:radial-gradient(200px at top left,red 10%,blue 50%,green 100%)
重複漸變
不過是加了乙個"repeating-"
color-point(red 10px,blue 20px,yellow 20px); 用畫素來表示，而不用百分比。。。
瀏覽器相容性可能不行，值得注意。
補充:
徑向漸變:
預設的漸變中心為center[標籤中心],漸變的形狀為ellipse[橢圓],漸變大小為 farthest-corner[最遠的角落]
漸變形狀: ellipse[橢圓],circle[圓]
漸變大小: closest-side[最近的邊] farthest-side[最遠的邊] closest-corner[最近的角落] farthest-corner[最遠的角落]
於是就有了這樣的寫法
circle:圓形漸變
background: repeating-radial-gradient(circle,#ff0b21 15%,#ec09dc 18%,#9a18fd 5%);
2.適應相容性(不支援才加)
瀏覽器字首
firefox:-moz-
chrome,safari:-webkit-
opera: -o-
background-image:inear-gradient();
background-image:-moz-inear-gradient();
background-image:-o-inear-gradient();
背景顏色漸變
css3 漸變 gradient 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用影象來實現這些效果，現在通過使用 css3 的漸變 gradients 即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變 gradient 是由瀏覽器生成的。1 語法 backgroun...
背景顏色漸變
專門做漸變顏色的 這種漸變色，瀏覽器要當做背景解析的，所以應該給background image 引數1 漸變的方向 to 乙個方向 還可以寫角度,0deg在正下，值越大，越順時針旋轉 後面的引數是顏色，至少2個顏色，顏色要 2 第乙個顏色後面寫乙個百分比，代表在什麼位置結束 後面的顏色再寫百分比，...
HTML 背景 漸變
background color url repeat fixed top 1.background color 背景顏色 預設transparent透明 2.backgrounf image url 背景 3.背景平鋪 background repeat repeat x 沿x軸平鋪 repeat...