လုပ်ဆောင်ချက် repeating-radial-gradient

လုပ်ဆောင်ချက် repeating-radial-gradient သည် ထပ်ခါထပ်ခါဖြစ်သော အချက်ပြ ရောင်စဉ်တန်းကို သတ်မှတ်ပေးသည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် ရောင်စဉ်တန်း၏ ပုံစံတစ်မျိုးကို သတ်မှတ်ပေးခြင်းဖြစ်သည်၊ ဥပမာ၊ 0px မှ 10px အထိ - အနီရောင်မှ စိမ်းပြာရောင်သို့ ရောင်စဉ်တန်းနှင့် ဤ ရောင်စဉ်တန်းသည် ဘလောက်တစ်ခုလုံးတွင် ထပ်ခါထပ်ခါ ဖြစ်ပွားနေမည်: 0px မှ 10px, 10px မှ 20px, 20px မှ 30px စသည်ဖြင့် ဖြစ်သည်။

လုပ်ဆောင်ချက်သည် မည်သည့်အပြောင်းအလဲမျှမရှိဘဲ radial-gradient နှင့် အတူတူသော အကန့်သတ်များဖြင့် အလုပ်လုပ်သည်၊ ကွာခြားချက်မှာ ထပ်ခါထပ်ခါဖြစ်မှု အကျိုးသက်ရောက်မှုသာ ဖြစ်သည်။ လက်ခံသော အကန့်သတ်များကို radial-gradient ၏ ဖော်ပြချက်တွင် ကြည့်ပါ။

ဝါကျဖွဲ့စည်းပုံ

cssselector {
  background: repeating-radial-gradient([ပုံစံ အမျိုးအစား အနေအထား], အရောင်1 အရွယ်အစား1, အရောင်2 အရွယ်အစား2...);
}

ဥပမာ

အာရုံစူးစိုက်မှုစက်ဝိုင်းများ:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

ဥပမာ

အာရုံစူးစိုက်မှု ဘဲဥပုံများ:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

ဥပမာ

အာရုံစူးစိုက်မှု စက်ဝိုင်းများကို အလယ်ဗဟိုတွင် မဟုတ်ဘဲ၊ အစွန်းတစ်ဖက်တွင် ထားကြပါစို့:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

ဒါလည်း ကြည့်ပါ