CSS3 gradient簡單使用

2021-08-27 10:04:01 字數 927 閱讀 1468

因方便在firefox中測試,根據原文簡單總結一下mozilla核心的線性漸變用法(徑向漸變暫時忽略),其他核心瀏覽器的漸變(webkit-old,webkit-new,opera,

trident)用法都差不多,請參考原文.

在mozilla核心中使用 -moz-linear-gradient 屬性來完成漸變效果,-moz-linear-gradient 屬性 需要 3個引數:

漸變方向 | 起始顏色 | 終止顏色(可以指定多種顏色)

關於 漸變方向 的示例如下:

left

toptop left

top right

0deg

90deg

180deg

270deg

關於多顏色漸變 的示例如下:

left

每個漸變顏色值都可以指定乙個"停止點"(百分比/畫素),指定漸變過程中純色的位置(未指定則各顏色均勻分布):

left

透明 + 透明 + 背景:

[注意:在只設定乙個background時,背景是在背景顏色之上的,也就是說背景會覆蓋背景顏色;而下面的示例是設定了兩個background層,第一層是透明漸變的顏色,第二層是一張,而且由於background屬性中後載入的影象(或者說背景層)在先載入的背景層的下面,該示例相當於在背景影象上覆蓋了一層透明漸變色的層]

css3 Gradient漸變效果

雖然css3的漸變屬性在眾瀏覽器中得到較好的支援,但在實際使用的時候也像製作軟體 photoshop cs6 firework cs6等 的漸變工具一樣,將漸變分成了幾種 線性漸變 linear gradients 徑向漸變 radial gradients 重複線性漸變和重複徑向漸變。國外乙個根據...

CSS3的背景漸變gradient

css3 gradient 分為 linear gradient 線性漸變 和radial gradient 徑向漸變 記住漸變並不是css3的乙個屬性,而是乙個屬性的值,雖然在css3中沒有專門註明漸變是針對background的,但是目前我所了解到的是只有background才會應用漸變屬性 b...

CSS3魔法堂 背景漸變(Gradient)

一 前言 很久之前就了解過css3的線性漸變 linear gradient 這段時間決定進一步認知這一特性,以下筆記以便日後查閱。二 css3的各種背景漸變 1.線性漸變 示例 七彩虹 樣式屬性 linear gradient 起始角度,color stop,color stop color st...