CSS3定義漸變語法

漸變是一種常用的網頁設計特效，而CSS3定義了一種更強大的漸變語法。使用CSS3定義的漸變可以實現更加復雜的效果，比如徑向漸變和重復漸變等。下面我們來學習一下CSS3定義漸變的語法。

1. 線性漸變

線性漸變是最簡單的一種漸變，它沿著一條直線方向漸變。線性漸變的語法如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction指定漸變的方向，可以是top、bottom、left、right，也可以是以角度為單位的值；color-stop是漸變的顏色點，可以設置多個，用逗號隔開。

2. 徑向漸變

徑向漸變從一個圓心向外擴散，可以實現很多漂亮的效果。徑向漸變的語法如下：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

其中，shape可以是circle或ellipse，size指定漸變的大小，at指定漸變的位置，可以用像素或百分比來指定；start-color和last-color分別是漸變的開始和結束顏色。

3. 重復漸變

重復漸變可以讓漸變效果在一個區域內重復出現。重復漸變的語法如下：

background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

其中，repeating-linear-gradient和repeating-radial-gradient分別表示重復的線性漸變和重復的徑向漸變。

總結

在CSS3中，漸變已成為了一個重要的設計元素。通過掌握漸變的語法，我們可以實現更加豐富的設計效果。