CSS顏色漸變

使用角度

如果你想要在漸變的方向上做更多的控制，你可以定義乙個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）。

語法background: linear-gradient(angle, color-stop1, color-stop2);

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

使用透明度（transparent）

css3 漸變也支援透明度（transparent），可用於建立減弱變淡的效果。

為了新增透明度，我們使用 rgba() 函式來定義顏色結點。rgba() 函式中的最後乙個引數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。

css3 徑向漸變

徑向漸變由它的中心定義。

為了建立乙個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。預設情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

語法background: radial-gradient(center, shape size, start-color, ..., last-color);

示例1（線性漸變）：

示例2（線性漸變）：

家用電器

css顏色漸變

華麗麗的分割線 123 用css實現網頁背景漸變的 如下 一 從上往下漸變 example source code body 二 從左上至右下漸變 example source code body 三 從左往右漸變 example source code body 一 從上往下漸變 example ...

css 顏色漸變

漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用來實現，css3將會輕鬆實現網頁漸變效果。要得上面的線性漸變效果，我們這樣去定義css3樣式 background image moz linear gradient top,8fa1ff,3757fa firefox background...

css顏色漸變

華麗麗的分割線 12 3用css實現網頁背景漸變的 如下 一 從上往下漸變 example source code body 二 從左上至右下漸變 example source code body 三 從左往右漸變 example source code body 一 從上往下漸變 example ...