css3線性漸變

2021-09-29 07:00:19 字數 906 閱讀 1883

css3線性漸變

為了建立乙個線性漸變,必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時,你也可以設定乙個起點和乙個方向(或者乙個角度)。

語法

background-image: linear-gradient(direction, color1,color2)

;

線性漸變-從上到下(預設情況下)

div

線性漸變-從左到右從左邊開始漸變

div

線性漸變-對角從左上角到右下角

div

線性漸變-角度先參考一下下面的這個圖

角度是指水平線和漸變線之間的角度,逆時針方向計算。換句話說,0deg 將建立乙個從下到上的漸變,90deg 將建立乙個從左到右的漸變。

div

使用多個顏色節點原理和兩種顏色的一樣

div

使用透明度

div

重複的線性漸變

div

css3線性漸變

css3漸變有兩種 linear gradient線性漸變和radial gradient徑向漸變。今天看的是linear gradient線性漸變,所以只做線性漸變的總結。w3c標準語法 formal grammar linear gradient to left right top bottom...

CSS3線性漸變

css3線性漸變可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 建立乙個線性漸變,必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。方向可以是上下 左右或者對角方向,你也可以設定乙個起點和乙個方向 或乙個角度 語法 background li...

理解CSS3線性漸變

為了顯示乙個漸變而專門製作乙個的做法是不靈活的,而且很快會成為一種不好的做法。但是遺憾的是,截至寫這篇文章,可能還必須這樣做,但是希望不會持續太久。多虧firefox 和safari chrome,我們現在可以使用最少的努力實現強大的漸變。在本文中,我們將展示css漸變的簡單實現以及該屬性在mozi...