စီစ်တင့်ဆေး @property အကိုးအချုပ်

အခြေအနေ နှင့် အသုံးပြုခြင်း

စ်စ်စ် @property အခြေအနေ အဖွဲ့ဝင် အသုံးပြုကြည်း: အခြေအနေ အဖွဲ့ဝင် အခြေအနေ ကို အုပ်ချုပ်ကြည်း ပြီး အခြေအနေ အဖွဲ့ဝင် အခြေအနေ ကို အသုံးပြုကြည်း၊ အခြား JavaScript ကို လုပ်ဆောင် လိုင်းမရှိပါ。

@property အခြေအနေ စစ်ဆေးခြင်း နှင့် ကြေညာခြင်း အဖွဲ့ဝင်များ ရှိသော အခြေအနေ အဖွဲ့ဝင် သည် အခြေအနေ အမြန်အကျဉ်း အခြေအနေ ကို ကိုင်တွယ် နိုင် ပြီး အခြေအနေ အဖွဲ့ဝင် အခြေအနေ ကို အသုံးပြုနိုင်သလား ကို အသုံးပြုကြည်း။

အသုံးပြုကြည်း @property အကျိုးသက်ရောက်ခြင်း:

• အခြေအနေ စစ်ဆေးခြင်း နှင့် ကြေညာခြင်း: အကိုရိယာ အခြေအနေ အခြေအနေ အမျိုးအစား ကို အသုံးပြုကြည်းပါ၊ ဥပမာ <number>、<color>、<length> စသည်။ ဤ အခြေအနေ ကြောင့် အမှား ကို ကာကွယ်နိုင် ပြီး အကိုရိယာ အခြေအနေ ကို အခြေအနေ မျှော်လင့်ပါ。
• အမြန်အကျဉ်း အခြေအနေ အသုံးပြုကြည်း: အကိုရိယာ အခြေအနေ အမြန်အကျဉ်း အခြေအနေ ကို အသုံးပြုကြည်းပါ၊ အခြား အမှား အခြေအနေ မှ အသုံးပြုရာ ကြီးမားသော သုံးနည်း ကို အသုံးပြုပါ。
• အသုံးပြုခြင်း အဖြစ် အသုံးပြုကြည်း: အကိုရိယာ အခြေအနေ အဖိုင်ပိုင်ရှင် မှ အသုံးပြုနိုင်သလား ကို အသုံးပြုကြည်းပါ。

အကြောင်းအရာ: အကိုရိယာ အခြေအနေ အသုံးပြုကြည်း

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

အထင်ရှားသော အကိုရိယာ အသုံးပြုခြင်း --my-color သည် အရောင် အခြေအနေ ဖြစ်၍ အဖိုင်ပိုင်ရှင် အခြေအနေ မှ အသုံးပြုနိုင် ပြီး အမြန်အကျဉ်း အခြေအနေ အား မျှော်လင့်ပါ。

စ်စ်စ် အကိုရိယာ အခြေအနေ ကို အသုံးပြုကြည်း:

body {}}
  backgound-color: var(--my-color);
}

အမှတ်

အမှတ် 1

အစားထိုး အစားအစား ကို အမှတ်ပြုပြီး၊ အစားထိုး အစားအစား ကို အစားထိုးကြောင်း အစားထိုးပြီးသည်။

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

ကိုယ်တိုင် ကြိုးစားကြပါ

အမှတ် 2

ကိုယ်ပိုင် အချက်အလက် နှစ်ခု ကို အမှတ်ပြုပြီးသည် - ဒီတို့ကို အစားထိုးကြောင်း အစားထိုးပြီးသည်။

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

ကိုယ်တိုင် ကြိုးစားကြပါ

CSS ဘာသာစကား

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

အချက်အလက် အမှတ်

ဘာသာစကား ထောက်ပံ့

အော်ဒိုင်တန်အချက်အလက်များသည် အော်ဒိုင်တန် @ ကိစ္စအား အထူးသို့ ထောက်ပံ့သော ဘာသာစကား ပုံစံကို အမှတ်ပြုသည်။

相关页面

教程：စီစ်တင့်ဆေး @property အကိုးအချုပ်