CSS radial-gradient() ফাংশন

নির্দিষ্ট ও ব্যবহার

CSS radial-gradient() ফাংশন কেন্দ্রসূচী অনুসারে গড়া ক্রমবর্ধমান রঙবর্ণকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে নিয়ে আসে。

কেন্দ্রসূচী অনুসারে গড়া ক্রমবর্ধমান রঙবর্ণ কেন্দ্র দ্বারা নির্দিষ্ট হয়。

কেন্দ্রসূচী অনুসারে গড়া ক্রমবর্ধমান রঙবর্ণ তৈরি করতে, কমপক্ষে দুইটি রঙবর্ণবর্ণনকে নির্দিষ্ট করতে হবে。

কেন্দ্রসূচী অনুসারে গড়া ক্রমবর্ধমান রঙবর্ণের উদাহরণ:

এককলব

উদাহরণ 1

রঙবর্ণবর্ণন সমতল কেন্দ্রসূচী অনুসারে গড়া ক্রমবর্ধমান রঙবর্ণ:

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

亲自试一试

উদাহরণ 2

বৈচিত্র্যময় রঙবর্ণ বৈকল্পিক কেন্দ্রসূচী অনুসারে গড়া ক্রমবর্ধমান রঙবর্ণ:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

亲自试一试

例子 3

圆形形状的径向渐变：

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

亲自试一试

例子 4

使用不同大小关键词的径向渐变：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

亲自试一试

CSS 语法

radial-gradient(shape size at position, start-color, ... , last-color);
值 描述
shape

定义渐变的形状。可能的值：

  • ellipse（默认）
  • circle
size

定义渐变的大小。可能的值：

  • farthest-corner（默认）
  • closest-side
  • closest-corner
  • farthest-side
position 定义渐变的位置。默认值是 "center"。
start-color, ... , last-color

色标是您希望在其间呈现平滑过渡的颜色。

此值由一个颜色值组成，后跟一个或两个可选的色标位置（0% 到 100% 之间的百分比或沿渐变轴的长度）。

技术细节

版本： CSS3

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
radial-gradient()
26 10 16 6.1 12.1
两个位置的色标
71 79 64 12.1 58

相关页面

教程：CSS 渐变

সূত্র:CSS background-image প্রোপার্টি

সূত্র:CSS conic-gradient() function

সূত্র:CSS linear-gradient() function

সূত্র:CSS repeating-conic-gradient() function

সূত্র:CSS repeating-linear-gradient() function

সূত্র:CSS repeating-radial-gradient() ফাংশন