css漸變色概念:
css漸變色(gradients)能讓我們用一種顏色漸變的效果修飾乙個空間——從一種顏色過渡到另外一種顏色——填充這個空間。漸變色有兩個形式:linear
(線性漸變) 和radial
(環形漸變)。很顯然css漸變色(gradients)技術是產生了一種視覺圖案效果,而實現這種視覺效果很簡單,能通過簡單程式設計實現。css3裡很早就引入了css漸變色(gradients),但這種技術的推廣卻經歷了很長時間。
css漸變色(gradients)技術基本的語法:
統一**格式
background-image: linear-gradient(|| ,]? , [, ]*)
第乙個引數是漸變起始點或角。第二個引數是一種顏色停止點(color stops)。至少需要兩種顏色(起點和終點),你可以新增任意種顏色來增加顏色漸變的豐富程度。對顏色停止點的定義可以是一種顏色,或一種顏色加乙個百分比:
/* color-stop(percentage/amount, color) */color-stop(0.20, red)
下面的這段**基本包括了自頂向下顏色漸變的所有情況:
css漸變色(gradients)技術裡還支援帶有角度的漸變方向,如45度角方向漸變:
/* fallback */background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053),
color-s top(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg, #063053, #395873);
/* the "standard" */
background-image: linear-gradient(45deg, #063053, #395873);
}
css顏色漸變(gradients)技術很有價值,但有時很難實現。有時你已經實現了想要的漸變,而瀏覽器的支援也會成為乙個問題。下面是一些使用css顏色漸變(gradients)的建議:
background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
效果:
基本的顏色線性漸變,自上而下
css3 顏色 背景 漸變
漸變放在 css裡的語句 一定要按這個順序排,才不會出錯。否則 有的瀏覽器會不正常,今天本來調好了,發現ie9不行,搞了半天不行,崩潰了 最後準備還是使用背景算了 最後一次 測試,終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...
CSS3實現背景顏色漸變 摘抄
一.webkit瀏覽器 1 第一種寫法 background webkit gradient linear 10 10 100 100 color stop 0.14,rgb 255,0,0 color stop 0.5,rgb 255,255,0 color stop 1,rgb 0,0,255 ...
CSS3背景顏色漸變效果
1 firefox瀏覽器 background image moz linear gradient top eef9fe,d1ecff 2 safari chrome瀏覽器 background image webkit gradient linear,50 0 50 100 from eef9fe...