CSS 線性漸變屬性值及範例詳解

2021-10-25 13:57:36 字數 1403 閱讀 4254

漸變色函式的結果屬於資料型別,是一種特別的資料型別,所以漸變色只能被用於可以使用的地方

linear-gradient(|,, ?)

用角度值指定漸變的方向(或角度)。角度順時針增加。

包括乙個顏色值及可選的終點位置(從何時開始漸變)

顏色沿著漸變軸的方向顏色變化順序為:顏色1完全融合顏色2

定義漸變中點,就是定義兩個顏色完全融合的位置。設定在兩個顏色值之間(注意與顏色終點不同,需要用逗號分隔)

角度開始漸變位置

定義漸變中點(完全融合位置)

預設為兩個顏色變化開始到結束的中點

把漸變範圍定義到30%到70%之間,此時的漸變中點就是50%(50%是30%到70%的中點),這時候漸變中點的取值範圍為(30%,70%),不能取兩端的值,超出範圍時實際效果為顏色之間變化,沒有漸變效果

多個漸變效果

存在多個漸變函式時會同時生效,後面生成的圖形會疊加在前面生成圖形之上

附上mdn的例子~~~

background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);

設定的百分比值、長度值都是相對於漸變起點進行設定

可以設定多個漸變函式,後面的會疊加在上面

詳解CSS 3 漸變屬性

css 3中的漸變屬性的支援度具體是 ie10 ff3.6 safari4.0 chrome opera11.1 ios3.2 opera mobile11.1 android,也就是說除了ie10以外其它的瀏覽器已經支援 css3 的漸變屬性了 雖然有些還在使用私有屬性 opera暫不支援徑向漸變...

詳解CSS3漸變(線性和徑向)

css3漸變分為線性漸變和徑向漸變,先來說說比較簡單的線性漸變。css3的線性漸變和設計軟體中的漸變工具沒什麼區別,都是指定乙個漸變的方向,起始顏色,結束顏色,當然,起始顏色和結束顏色中間還可以新增其他顏色,也就是說漸變色可以是多種,而不僅僅是兩種顏色之間的漸變。w3c標準線性漸變語法如下 line...

css3 box sizing屬性值詳解

box sizing屬性可以為三個值之一 content box default border box,padding box。content box,border和padding不計算入width之內 padding box,padding計算入width內 border box,border和p...