linear-gradient(direction, color-stop, ……, color-stop)
repeating-linear-gradient(direction, color-stop, ……, color-stop)
background-image
, list-style-image
之類的值。direction
參數,表示漸層顔色變化的方向。以 deg
(角度) 為單位,惟 0deg
是由下往上的垂直方向 (漸層為水平呈現) ,正的角度依順時鐘旋轉。内定值 (没有指定時) 為 180deg
,也就是由上往下的垂直方向。direction
參數也可由 top
, bottom
, left
, right
等特別字 (keywords) 表示,如 to top
, to right
, to bottom
, to left
,分別表示 0deg
, 90deg
, 180deg
, -90deg
。而如 to bottom right
則表示漸層分佈由 gradient box 左上角往右下角 (斜對角) 的方向。當作 background-image
時, gradient box 通常就是 background-size
的範圍。color-stop
參數,表示漸層的顔色及分佈,可分爲二部分,顔色及色佈,中間至少需以一半形空格分隔,當然可以有很多組 color-stop
。顔色表示方式可參考 color units ;色佈 (顔色分佈位置) 可以 css 各種標準尺寸單位表示 (如 %, px, em, …) ,可以接受小於 0% 及大於 100% ,有時候 0% 或 100% 的位置可省略,如果都沒有指定色佈,瀏覽器應由 0% 至 100% 自動平均分配位置。而如需精準計算尺寸,可參考 w3c 圖示 。repeating-linear-gradient()
與 linear-gradient()
,差別在前者會無限重複呈現,仿如 ……, color-stop, color-stop,……
。background-image:linear-gradient(30deg,hsl(30,100%,80%), hsl(120,80%,50%));
background-image:linear-gradient(to bottom left, hsl(240,100%,50%), hsl(60,100%,75%) 35%, hsl(240,100%,50%));
list-style-image:repeating-linear-gradient(45deg, hsl(260,100%,50%), hsl(260,100%,50%) 5%, transparent 5%, transparent 10%);
radial-gradient(size at cp, color-stop, ……, color-stop)
repeating-radial-gradient(size at cp, color-stop, ……, color-stop)
background-image
, list-style-image
之類的值。size at cp
參數,表示放射形漸層橢圓形的半徑尺寸 (size
) 及圓心位置 (cp
) 。圓心為漸層的始點,指定方式與 background-position
相同,内定值 (没有指定時) 為 center
,表示 gradient box 中心點。當作 background-image
時, gradient box 通常就是 background-size
的範圍。半徑 (size
) 可以是 css 各種標準尺寸單位表示 (如 %, px, em, …) ,二個值以半形空格分隔表示橢圓形水平與垂直半徑,如果僅一個值表示正圓形,但一個值不接受 % 為單位;而 % 是以 gradient box 的範圍來計算。漸層橢圓形的尺寸是獨立的,不一定要符合 gradient box 。size
也可依 gradient box 為基準,由幾個特別字 (keywords) 表示:farthest-side
farthest-corner
farthest-side
時的比例。此為内定值 (没有指定時) 。closest-side
closest-corner
closest-side
時的比例。color-stop
參數,表示漸層的顔色及分佈,可分爲二部分,顔色及色佈,中間至少需以一半形空格分隔,當然可以有很多組 color-stop
。顔色表示方式可參考 color units ;色佈 (顔色分佈位置) 可以 css 各種標準尺寸單位表示 (如 %, px, em, …) ,可以接受小於 0% 及大於 100% ,有時候 0% 或 100% 的位置可省略,如果都沒有指定色佈,瀏覽器應由 0% 至 100% 自動平均分配位置。 0% 表示漸層橢圓形圓心; 100% 表示漸層橢圓形邊緣。repeating-radial-gradient()
與 radial-gradient()
,差別在前者會無限重複呈現,仿如 ……, color-stop, color-stop,……
。background-image:radial-gradient(100px, hsl(50,100%,70%), hsl(240,100%,30%));
background-image:radial-gradient(60px 120px at 60px 120px, hsl(0,100%,95%), hsl(0,100%,90%) 30%, hsl(0,100%,95%) 40%, hsl(0,100%,95%) 42%, hsl(0,75%,86%) 99%,transparent);
background-image:repeating-radial-gradient(farthest-side at top, hsl(240,100%,96%), hsl(240,100%,96%) 6px, transparent 6px, transparent 16px);
list-style-image:repeating-radial-gradient(hsl(120,100%,50%), hsl(120,100%,50%) 2px, transparent 2px, transparent 3px);
參考→基本範例教學
CSS 漸層無接縫背景桌布創意發想
撰文時,各家瀏覽器尚有些許瑕疵; firefox 僅在部分細微處有偏色問題; IE 僅有一範例錯誤,表現很佳;出乎意料地, google chrome 非常糟。範例中有標註最正確呈現的瀏覽器,讀者可自行比較。部分範例以 css
animation
加入動畫效果,以彰顯一般繪圖軟體或 flash 很難處理的技術。css gradient 視覺冥想 (範例來源連結)