သင်ရိုးစာ

ဝန်းကျင် ကိုယ်စားပြုခြင်း CSS

စျစ်စ် ဗီဇ

ကျွမ်းကျင်သည့် အခွင့်အရေး

ပြည်ထောင်စု စာရင်းသိမ်း

စက်တင် ဝါဒီးစီးရေး စိတ်အောင်း

CSS radial-gradient() ပုံစံ

上一页 စက်တင် လက်ရှိ ဆိုင်ရာ
下一页 စက်တင် လက်ရှိ ဆိုင်ရာ
返回上一层 ဝန်းကျင် ကိုယ်စားပြုခြင်း CSS ဖြေဖြူ

အသုံးပြုခြင်း နှင့် လက်ဆုံးဖြတ်

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% အထိ ရှိ သော ရောင်ချက် အချက် သို့မဟုတ် အစီအစဉ်အရောင်ချက် အရှိန်)