CSS @property 规则

Pagsasagawa at paggamit

CSS @property Ang mga patakaran ay ginagamit upang direktang idefinin ang custom CSS attribute sa style sheet, na walang kailangang pataasin ang anumang JavaScript.

@property Ang mga patakaran ay mayroong mga pampagsusuri sa uri at pagbabawal, maaaring itakda ang default na halaga, at maaaring itakda kung ang attribute ay maaaring minana ang halaga mula sa magulang na elemento.

Gamit: @property Ang kaugnayan nito:

• Pagsusuri sa uri at pagbabawal: dapat itakda ang uri ng datos ng custom property, halimbawa <number>、<color>、<length> at iba pa. Ito ay nangangapital sa pagiging mali at nangangapital sa tama na paggamit ng custom property.
• Pagtatakda ng default na halaga: maaaring itakda ang default na halaga para sa custom property. Ito ay nangangatwiran na kapag pinagkakaloob ang walang kakahulugan na halaga, gamitin ng browser ang nakadefined na fallback na halaga.
• Pagtatakda ng pagkakasunod-sunod: dapat itakda kung ang custom property ay maaaring minana ang halaga mula sa magulang na elemento.

Halimbawa: paglalarawan ng custom property

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

Ang paglalarawan ay nangangahulugan na ang --my-color ay isang property ng kulay, na maaaring minana ang halaga mula sa magulang na elemento at ang default na halaga ay lightgray.

Sa CSS gamit ang custom property:

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

Eksemplo

Halimbawa 1

Tukuyin ang dalawang kalagayan na inilagay para sa pag-gradweng - at gamitin sila upang animadong ang pag-gradweng:

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

Subukan ang iyong sarili

Halimbawa 2

Tukuyin ang dalawang kalagayan na inilagay: isa para sa laki ng proyekto, isa para sa kulay ng proyekto:

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

Subukan ang iyong sarili

CSS syntax

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

Halaga ng attribute

Suporta ng browser

Ang mga numero sa talahanayan ay nangangahulugan na ang unang berserker na ganap na sumusuporta sa @ patakaran.

相关页面

教程：CSS @property 规则