css(二) 漸變

阿新 • • 發佈：2020-08-20

CSS3漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用影象來實現這些效果。但是，通過使用CSS3漸變（gradients），你可以減少下載的時間和寬頻的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

漸變分為線性漸變 linear-Gradient :向下/向上/向左/向右/對角方向

預設的是從上到下

#grad{background-image:linear-gradient(#e66465,#9198e5);

（2）、從左到右
起點是紅色，慢慢過渡到藍色：

1 2 3 4 #grad{ height:200px; background-image:linear-gradient(toright,red,yellow); }

（3）對角

從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：

1 2 3 4 #grad{ height:200px; background-image:linear-gradient(to bottom right,red,yellow); }

（4）對角使用多個顏色結點
帶有多個顏色結點的從上到下的線性漸變：

1 2 3 #grad{ background-image:linear-gradient(red,yellow,green); }

（5）使用透明度（transparent）

從左到右的線性漸變，帶有透明度：

1 2 3 #grad{ background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1)); }

徑向漸變 radial-Gradient :由它們的中心定義

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

。

1、顏色結點均勻分佈（預設情況下）

#grad{

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

2、顏色結點不均勻分佈

#grad{background-image:radial-gradient(red5%,yellow15%,
green60%);}

3、設定形狀
shape引數定義了形狀。它可以是值circle或ellipse。其中，circle表示圓形，
ellipse表示橢圓形。預設值是ellipse。

#grad{background-image:radial-gradient(circle,red,yellow,
green);}