CSS conic-gradient() ফাংশন

বিবরণ ও ব্যবহার

CSS-র conic-gradient() ফাংশন কণকি গ্রেডিয়েন্টকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে নিয়ে আসে。

কণকি গ্রেডিয়েন্ট হল একটি রঙ হলন্দা কেন্দ্রস্থল চাকা করে পরিবর্তিত হওয়ার গ্রেডিয়েন্ট (পাইচার্ট এবং রঙ চক্রের মতো)。

কণকি গ্রেডিয়েন্ট তৈরি করতে, কমপক্ষে দুটি রঙ স্টপপয়েন্ট নির্দিষ্ট করতে হবে。

কণকি গ্রেডিয়েন্ট উদাহরণ:

ইনস্ট্যান্স

উদাহরণ 1

তিনটি রঙের কণকি গ্রেডিয়েন্ট রয়েছে:

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

亲自试一试

উদাহরণ 2

পাঁচটি রঙের কণকি গ্রেডিয়েন্ট রয়েছে:

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

亲自试一试

উদাহরণ 3

তিনটি রঙ এবং প্রত্যেক রঙের জন্য কোণ নির্দিষ্ট করা কণকি গ্রেডিয়েন্ট রয়েছে:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

亲自试一试

উদাহরণ 4

কিন্তু বর্ডার-রেডিয়াস: 50% এড়ানোর মাধ্যমে কণকি গ্রেডিয়েন্টকে পাইচার্ট মতো দেখানো যায়:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

亲自试一试

例子 5

带有起始角度的锥形渐变：

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 6

带有中心位置的锥形渐变：

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 7

同时带有起始角度和中心位置的锥形渐变：

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 8

另一个饼图示例：

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

亲自试一试

CSS 语法

background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);

প্রযুক্তিগত বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম এই ফাংশনটি সম্পূর্ণরূপে সমর্থনকারী ব্রাউজার সংস্করণটির জন্য

সংশ্লিষ্ট পাতা

শিক্ষা:CSS গ্রেডেন্ট

উল্লেখ:CSS background-image প্রোপার্টি

উল্লেখ:CSS linear-gradient() ফাংশন

উল্লেখ:CSS radial-gradient() ফাংশন

উল্লেখ:CSS repeating-conic-gradient() ফাংশন

উল্লেখ:CSS repeating-linear-gradient() ফাংশন

উল্লেখ:CSS repeating-radial-gradient() ফাংশন