1.7 Gradients漸變 · Html和Css

### **漸變（Gradients）** 漸變類型： **線性漸變（Linear-Gradients）**- 向下/向上/向左/向右/對角方向 **徑向漸變（Radial-Gradients）**- 由它們的中心定義 #### 一、 **線性漸變** 為了創建一個線性漸變，你必須**至少定義兩種顏色**結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度） **語法：** background: linear-gradient(direction方向, color-stop1, color-stop2, ...); direction方向的值有： to left：設置漸變為從右到左。 to right：設置漸變從左到右 to top：設置漸變從下到上 to bottom：設置漸變從上到下 這是默認值，可以不寫 已上值除了webkit，其他瀏覽器均可以。 **1.從上到下（默認情況下）**：（無需寫上方向，只需要顏色即可）實例：從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色： ~~~ #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 標準的語法 */ } ~~~ **2.從左到右** 實例：從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色： ~~~ #grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 標準的語法 */ } ~~~ #### **3.對角** 通過指定水平和垂直的起始位置來制作一個對角漸變。實例：從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色， ~~~ #grad { background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */ } ~~~ #### **二、徑向漸變** 徑向漸變由它的中心定義。為了創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。**默認情況下，**漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。 **語法** background: radial-gradient(center, shape size, start-color, ..., last-color);shape是形狀， size是大小。 **1. 顏色結點均勻分布** 即只寫顏色不寫其他的 **實例** ~~~ #grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 標準的語法 */ } ~~~ **2. 顏色結點不均勻分布** 即在顏色后面寫上大小的百分比 **實例** ~~~ #grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */ } ~~~ **3.設置形狀** shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。 **實例** ~~~ #grad { background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */ } ~~~