دالة CSS ذات التدرج المخروطي ()
مثال
تدرج مخروطي بثلاثة ألوان:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تعيّن وظيفة التدرج المخروطي () تدرجًا مخروطيًا كصورة الخلفية.
التدرج المخروطي هو تدرج مع انتقالات لونية تدور حول نقطة مركزية.
لإنشاء تدرج لوني مخروطي ، يجب عليك تحديد توقفي لوني على الأقل.
مثال على التدرج المخروطي:
| الإصدار: | CSS3 |
|---|
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الوظيفة بشكل كامل.
| Function | |||||
|---|---|---|---|---|---|
| conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
بنية CSS
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
| Value | Description |
|---|---|
| from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
| at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
| color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
مزيد من الأمثلة
مثال
تدرج مخروطي بخمسة ألوان:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
مثال
تدرج مخروطي بثلاثة ألوان ودرجة لكل لون:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
مثال
اجعل التدرج المخروطي يبدو وكأنه فطيرة بإضافة نصف قطر الحد: 50٪:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
مثال
تدرج مخروطي بزاوية من:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
مثال
تدرج مخروطي في الموضع:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
مثال
تدرج مخروطي من الزاوية والموضع:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
مثال
مخطط دائري آخر:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
الصفحات ذات الصلة
دروس CSS: تدرجات CSS