စတုံးဆိပ် @property ကိုးကား

စတုံးဆိပ် @property ကိုးကား

@property အခြေခံ အချက်အလက် အစီအစဥ် တွင် ကိုယ်ပိုင် CSS အချက်အလက် အသုံးပြု ရန် လိုအပ်သော JavaScript မပြောင်းလဲဘဲ အသုံးပြုနိုင်သည်。

@property အခြေခံ အချက်အလက် ပုံစံ အား အချက်အလက် အမျိုးအစား စစ်ဆေး ပြီး ကတ္တား အချက်အလက် လုပ်ကျင့် ပြီး အချက်အလက် အဆိုပါ အချက်အလက် အမျိုးအစား အသုံးပြု သင့်လာကြောင်း အသိပေးသည်。

ကိုယ်ပိုင် အချက်အလက် အကြောင်းကြောင်း

@property --myColor {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}

အထက်တွင် အသုံးပြုသော အချက်အလက် --myColor အခြေခံ အရောင် အစား မြောက်ကြီးနှင့် အဆိုပါ အချက်အလက် အသုံးပြုနိုင် သည်။

CSS တွင် ကိုယ်ပိုင် အချက်အလက် အသုံးပြုရန် ကျွန်တော်တို့ အသုံးပြုကြသည် var() ပုဂ္ဂိုလ်ရေး

body {
  background-color: var(--myColor);
}

使用 @property အကျိုးသက်ရှိခြင်း

• အမျိုးအစား စစ်ဆေး：须指定自定义属性的数据类型，如 、、。可防止错误并确保正确使用自定义属性
• 设置默认值：可以为自定义属性设置默认值。这确保了如果以后分配了无效值，浏览器将使用定义的备用值。
• Set inheritance behavior: သတ်မှတ်ထားသော အချက်အလက်များသည် အဖိုင်အရာမှ အသုံးပြုထားသော အမှတ်အသားများကို လက်ခံလိမ့်မည်ကို သတ်မှတ်ပါသည်။

Browser Support

အခန်းမှာ အချက်အလက်များကို အသုံးပြုထားသော အမှတ်အသားများသည် အချက်အလက်များကို အသုံးပြုထားသော အဖိုင်အရာမှ အသုံးပြုထားသော အမှတ်အသားများကို လက်ခံလိမ့်မည်။

simple @property အခြေခံအရာ

အခြား အကျိုးသတ္တိများကို သတ်မှတ်ထားသည်:--my-bg-color နှင့် --my-txt-color။ နောက်မှာ div အရာများသည် background-color နှင့် color အခြား အချက်အလက်များတွင် သတ်မှတ်ထားသော

实例

@property --my-bg-color {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

亲自试一试

အခြား @property အခြေခံအရာ

အခြား အကျိုးသတ္တိတွင် အခြား <div> အရာများအား အခြား သတ်မှတ်ထားသော အချက်အလက်များကို အသုံးပြုထားသည်။ နောက်ပြီးတွင် .fresh နှင့် .nature အချက်အလက်များကို ကူးယူထားသော (အပြည့်အစင် အသုံးပြုထားသည်) အကျိုးသတ္တိကြည့်ချင်း:

实例

@property --my-bg-color {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

亲自试一试

အချက်အလက်များကို ကာကွယ်ထားသည် (အမျိုးအစား နှင့် အပြည့်အစင် အသုံးပြုထားသည်) အမှားများကို ချင်းပြောင်းလိမ့်မည်:

အခြား အကျိုးသတ္တိတွင် .nature အမျိုးအစားတွင် သတ်မှတ်ထားသော အချက်အလက်များသည် အကြမ်းဖတ်ထားသော အမှတ်အသားဖြစ်သည်။ ဘရူးသတ်မှတ်ထားသော initial-value အချက်အလက်များတွင် အသုံးပြုထားသော အပြည့်အစင် (lightgray):

实例

@property --my-bg-color {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

亲自试一试

inherits အသုံးပြုထားသော

အခြား အကျိုးသတ္တိတွင် inherits အသုံးပြုထားသော အမှတ်အသားကို falseဒါမှာသို့မဟုတ်။ သတ်မှတ်ထားသော အချက်အလက်များသည် အဖိုင်အရာမှ အသုံးပြုထားသော အမှတ်အသားများကို လက်ခံလိမ့်မည်။ အကျိုးသတ္တိကြည့်ချင်း:

实例

@property --my-bg-color {
  syntax: "";
  inherits: false;
  initial-value: lightgray;
}

亲自试一试

နောက်လာမည့် အကျိုးသတ္တိများမှာ inherits အသုံးပြုထားသော အမှတ်အသားကို trueဒါမှာသို့မဟုတ်။ သတ်မှတ်ထားသောအချက်အလက်များသည် အဖိုင်အရာမှ အသုံးပြုထားသော အမှတ်အသားများကို လက်ခံလိမ့်မည်။ အကျိုးသတ္တိကြည့်ချင်း:

实例

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

亲自试一试

使用 @property 创建平滑动画

使用 @property 规则可以实现的全新机会是动画化以前无法动画化的内容：渐变。查看以下实例：

实例

为渐变指定两个自定义属性：

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

亲自试一试

စတုံးဆိပ် @property ကိုးကား