ຜົນງານ @property

ຜົນງານ @property

@property ກົດລະບຽບມີການກໍານົດອາວຸໂສ CSS ຕົວເອງໃນກົດລະບຽບຮູບແບບ, ໂດຍບໍ່ຕ້ອງດຳເນີນ JavaScript。

@property ກົດລະບຽບມີການກວດກາຊະນິດຂອງວິທະຍາສາດ, ຂໍ້ຈຳກັດ, ການກຽມຄຳຄວາມຄົງຄວາມຫຼັງ, ແລະການກໍານົດວ່າອາວຸໂສສາມາດຫຼິ້ນສຳລັບການຫຼິ້ນສຳລັບວິທະຍາສາດຫຼືບໍ່。

ການກໍານົດຂອງອາວຸໂສຜົນປະສົງຕົວເອງ:

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

ການກໍານົດຂອງມັນແມ່ນ: --myColor ເປັນປະສົງສີທີ່ສາມາດຫຼິ້ນສຳລັບປະສົມປະກອບມູນຄ່າພາຍໃນປະກອບມູນຄ່າພາຍໃນສະຖານະທີ່ແບບສະເພາະແມ່ນ lightgray。

ເພື່ອນຳໃຊ້ຜົນປະສົງ CSS ເປັນຕົວເອງພວກເຮົາໃຊ້: var() ການປະກອບຕົວອາວຸໂສ:

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

使用 @property ຜົນປະໂຫຍດຂອງມັນ:

• ການກວດກາຊະນິດ：须指定自定义属性的数据类型，如 、、。可防止错误并确保正确使用自定义属性
• ການຕັ້ງຄູ່ມູນຄະນະພິມມີຄວາມຈະການ：ສາມາດຕັ້ງຄູ່ມູນຄະນະພິມຂອງຄູ່ມູນຄະນະພິມເປັນຄຳທີ່ມີຄວາມສາມາດ. ນີ້ຈະແນ່ນອນວ່າຖ້າຫຼັງຈາກນັ້ນມີຄວາມຈະການທີ່ບໍ່ມີຄວາມສາມາດ, ບາຣ໌ສະຫຼີກຈະນຳໃຊ້ຄູ່ມູນຄະນະພິມທີ່ກໍານົດແລະບໍ່ມີຄວາມສາມາດ.
• ການຕັ້ງການສະໜັບສະໜູນ：ຕ້ອງການບັນທຶກຄູ່ມູນຄະນະພິມຈະສາມາດລວມມາຈາກປະກອບຂອງພວກເຂົາຕົວຫຼືບໍ່.

ການສະໜັບສະໜູນບາຣ໌ສະຫຼີກ

ຈຳນວນໃນຕາລາງຈະສະແດງຄັ້ງທໍາອິດຂອງການສະໜັບສະໜູນຂອງກົດຂອງການຍົກສຳຫຼວດຂອງບາຣ໌ສະຫຼີກ.

ຄູ່ມູນ @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