function linear-gradient() na CSS

kaifiyawa da koyarwa

CSS linear-gradient() function dona kaiya wata ko'fani

Domin ki domin ki cikin kaiya, a bai da sabunta dabi'in wata daidai tunan, wanda zai kaiya kuma zai kaiya doki. Kuma zai iya kaiya dabi'in kaiya kaiya, kuma zai iya kaiya harshe kaiya

masanin cikin kaiya

tarihin

masanin 1

wannan kaiya cikin ko'fani doki. Ta fi akwai doki, kuma doki ko'fani doki, kuma doki ko'fani doki

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

تجربة شخصية

masanin 2

wannan kaiya cikin ko'fani kuduwa yamma. Ta fi akwai doki, kuma doki ko'fani doki

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

تجربة شخصية

masanin 3

wannan kaiya cikin ko'fani kuduwa ko'fani yamma, ko'fani kuduwa ko'fani yamma

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

تجربة شخصية

masanin 4

wannan kaiya cikin harshe

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

تجربة شخصية

masanin 5

wannan kaiya cikin daidai na wata

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

تجربة شخصية

مثال 6

تدرج خطي يحتوي على مؤشرين لونيين:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

تجربة شخصية

مثال 7

تدرج خطي مع شفافية:

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

تجربة شخصية

الجملة النصية لـ CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الفنction لأول مرة.

الصفحات ذات الصلة

دروس:تدرج CSS

参考：Kujerarun CSS kuma ya

参考：فنction conic-gradient() لـ CSS

参考：فنction radial-gradient() لـ CSS

参考：فنction repeating-conic-gradient() لـ CSS

参考：فنction repeating-linear-gradient() لـ CSS

参考：CSS repeating-radial-gradient() 函数