CSS Gradient

Gudanarwa da ƙararun shakafin

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

  • 线性渐变（向下/向上/向左/向右/对角线）
  • 径向渐变（由其中心定义）

CSS 线性渐变

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

Grammar

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

线性渐变 - 从上到下（默认）

下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：

From top to bottom (default)

مثال

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

جرب بنفسك

Linear gradient - from left to right

The following example shows a linear gradient starting from the left. It starts with red and transitions to yellow:

From left to right

مثال

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

جرب بنفسك

Linear gradient - diagonal

You can achieve diagonal gradients by specifying the horizontal and vertical starting positions.

The following example shows a linear gradient starting from the top-left corner (to the bottom-right corner). It starts with red and transitions to yellow:

Top-left to bottom-right

مثال

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

جرب بنفسك

Using angle

If you want more control over the gradient angle, you can define an angle to replace the predefined directions (down, up, right, left, bottom-right, etc.). The value 0deg is equal to up (to top). The value 90deg is equal to right (to right). The value 180deg is equal to down (to bottom).

180deg

Grammar

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

Tsaunin nuna ya bayyana tsaunin fada da ƙararun gudanarwa tsakanin.

Kwarewar ƙararun yana ƙararun ƙashe na kewaye da ƙararun tekun kuma na iya amfani da ita domin samar da ƙararun gudanarwa (daga fada zuwa kwaye).

مثال

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

جرب بنفسك

Amfani ƙararun ƙashe

Kwarewar ƙararun yana ƙararun ƙashe na kewaye da ƙararun tekun kuma na iya amfani da ita domin samar da ƙararun gudanarwa (daga fada zuwa kwaye).

مثال

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

جرب بنفسك

Kwarewar ƙararun yana ƙararun ƙashe na kewaye da ƙararun tekun kuma na iya amfani da ita domin samar da ƙararun gudanarwa (daga ƙashe zuwa kan).

Gudanarwa da ƙararun shakafin

مثال

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

جرب بنفسك

Amfani ƙararun shakafin

CSS gudanarwa da ƙararun shakafin, kuma zai iya amfani da ita domin samar da ƙararun gudanarwa.

A gina ce tattakiya, amma na tsaki kama RGBA() ƙararun zuwa samun ƙashe. Amfani ƙararun RGBA() ƙashe yana da ƙararun 0 zuwa 1, wanda ke bayyana ƙararun shakafin: 0 ke ƙararun kura, 1 ke ƙararun ƙashe (sai dai ƙararun).

النموذج التالي يعرض تدرج خطي يبدأ من اليسار. يبدأ بالشفافية الكاملة، ثم ينتقل إلى اللون الأحمر الكامل: }}

مثال

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

جرب بنفسك

التدرج الخطي المكرر

repeating-linear-gradient() الوظيفة المكررة لتدرج الخطي:

مثال

التدرج الخطي المكرر:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

جرب بنفسك