CSS3漸變教程

CSS3漸變是一種可用于創建過渡顏色和透明度的簡單的、靈活的方法。在本教程中，我們將學習兩種類型的CSS3漸變：線性漸變和徑向漸變。

1. 線性漸變

線性漸變表明了顏色沿水平或垂直方向如何過渡。 線性漸變由起始顏色（由哪一點開始）和終止顏色（到哪一點結束）指定。您可以添加更多的顏色選項，并使用百分比來指定每個選項的位置。

下面是一個線性漸變的例子。該代碼指定了從紅色到綠色的顏色過渡：

background: linear-gradient(to right, red, green);

您可以使用以下樣式設置線性漸變的方向：

• to top
• to bottom
• to left
• to right
• 角度（以度為單位）例如：45度

示例代碼使用角度來指定漸變方向：

background: linear-gradient(45deg, red, green);

2. 徑向漸變

徑向漸變是由圓心向四周擴展的過渡顏色。 像線性漸變一樣，您可以指定起始顏色和終止顏色，以及任意數量的顏色選項。您還可以使用shape設置漸變的形狀。可用的形狀是ellipse和默認的circle。

下面是一個徑向漸變的例子。該代碼指定了從圓心開始逐漸向外擴展的漸變：

background: radial-gradient(red, yellow, green);

示例代碼使用ellipse形狀和最近邊緣大小設置徑向漸變的形狀和尺寸：

background: radial-gradient(ellipse closest-side, red, yellow, green);

總結

CSS3漸變允許您輕松地創建過渡顏色和透明度。線性漸變允許您沿水平或垂直方向指定每個顏色選項的位置，而徑向漸變始于圓心并向外擴展。您還可以使用shape形狀和size大小選項來自定義徑向漸變。希望這篇文章可以幫助你更好的理解和使用CSS3漸變。