CSS3實現背景顏色漸變

2022-07-11 17:18:12 字數 1965 閱讀 7300

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...