css3實現背景漸變

= [ 

| | 

| ]一：線性漸變   詳細：

在css3中，可以使用 linear-gradient實現背景線性漸變。

= linear-gradient(  [ [ | to ] ,]?   [, ]+ )   = [left | right] || [top | bottom]

1-1 :background-image: linear-gradient(top, #eff6fb, #d3e4f3 68%); 如：

1-2：

background-image: linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%)

顯示效果：

1-3：

漸變方向也指定關鍵字。

background-image: linear-gradient(top left, #eff6fb 10%, #d3e4f3 68%);

效果：1-4：漸變方向也可以指定角度。

background-image: linear-gradient(0deg, #eff6fb 10%, #d3e4f3 68%);

0deg漸變開始在左側，90deg的底部，180deg在右側，270deg在頂部。因此，我們可以認為角度作為反??時針順序。

如:1-5：透明度(transparency)：還支援透明漸變。這是相當有用的，例如，當堆疊多個背景時。這裡是兩個背景的結合：一張，乙個白色到透明的線性漸變。

二：徑向漸變

徑向漸變類似於線性漸變

= radial-gradient(   [ [ || ] [ at ]? , |     at ,    ]?   [ , ]+ )

2-1：直接定義顏色漸變。background: -moz-radial-gradient(red, yellow, #1e90ff);

效果如圖：

效果如果：

2.形狀

2-3：起始位置一樣，形狀不一樣。

background-image: -moz-radial-gradient(bottom left,circle,red, yellow, #1e90ff);  

background-image: -moz-radial-gradient(bottom left,ellipse,red, yellow, #1e90ff); 

效果如圖：

3.大小(size)：size的不同選項(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來定義圓或橢圓大小的點。

三：重複漸變(repeating gradients)

重複乙個漸變，可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。

.repeating_radial_gradient_example

.repeating_linear_gradient_example

css3 背景漸變

在沒有了解css也可以做背景漸變以前，我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，下面是一些css3做背景漸變的方法。一.線性漸變 自上而下的線性漸變 div 從左往右的線性漸變 div 第乙個引數是漸變...

CSS3實現背景顏色漸變

css漸變色概念 css漸變色 gradients 能讓我們用一種顏色漸變的效果修飾乙個空間 從一種顏色過渡到另外一種顏色 填充這個空間。漸變色有兩個形式 linear 線性漸變 和radial 環形漸變 很顯然css漸變色 gradients 技術是產生了一種視覺圖案效果，而實現這種視覺效果很簡單...

css3 顏色 背景 漸變

漸變放在 css裡的語句 一定要按這個順序排，才不會出錯。否則 有的瀏覽器會不正常，今天本來調好了，發現ie9不行，搞了半天不行，崩潰了 最後準備還是使用背景算了 最後一次 測試，終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...