سی ای ایس رادیئل گریدینٹ
- پچھلے پیج سی ای ایس گریدینٹ
- پائیدار پیج سی ای ایس شادی
سی ای ایس رادیئل گریدینٹ
The radial gradient is defined by its center.
To create a radial gradient, you must also define at least two color stops.
syntax
background-image: radial-gradient(shape size at position, start-color, ... , last-color);
by default,shape for ellipse,size for farthest corner,position for center.
Radial gradient - evenly spaced color stops (default)
The following example shows a radial gradient with evenly spaced color stops:
مثال
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radial gradient - color stops with different intervals
The following example shows a radial gradient with different intervals between color stops:
مثال
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
to set the shape
shape Parameter defines the shape. It can accept circle or ellipse values. The default value is ellipse (ellipse).
The following example shows a circular radial gradient:
مثال
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
using keywords of different sizes
size Parameter defines the size of the gradient. It can accept four values:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
مثال
settings of different size keywords radial gradient:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
تکرار شدہ径ی گرید
repeating-radial-gradient() تکرار شدہ径ی گرید کا استعمال کے لئے فنکشن:
مثال
تکرار شدہ径ی گرید:
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
CSS گرید پرمنات
آ래 کی جدول میں CSS گرید پرمنات کیں:
| خصوصیت | وصف |
|---|---|
| background-image | ایک عنصر کے لئے ایک یا کئی پس منظر عکسوں کو سے مقرر کرنا |
- پچھلے پیج سی ای ایس گریدینٹ
- پائیدار پیج سی ای ایس شادی
