W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> @property --item-size { syntax: "<percentage>"; inherits: true; initial-value: 50%; } @property --item-color { syntax: "<color>"; inherits: false; initial-value: lightgray; } .container { display: flex; height: 200px; border: 1px solid black; /* 在父元素上设置自定义属性值 */ --item-size: 20%; --item-color: gold; } /* 使用自定义属性设置项目的大小和背景颜色 */ .item { width: var(--item-size); height: var(--item-size); background-color: var(--item-color); } /* 在第二个项目上设置自定义属性值 */ .two { --item-size: initial; --item-color: inherit; } </style> </head> <body> <h1>@property 规则</h1> <div class="container"> <div class="item one">项目一</div> <div class="item two">项目二</div> <div class="item three">项目三</div> </div> </body> </html>