CSS容器样式查询基本使用实例页面

CSS代码：

.card {
  display: inline-flex;
  :where(.status) {
    display: inline-grid;
    place-items: center;
    color: #fff;
    width: 100px;
    aspect-ratio: 1 /2;
    background-color: aliceblue;
  }
}
@container style(--status: success) {
  .status {
    background-color: green;
  }
}
@container style(--status: error) {
  .status {
    background-color: darkred;
  }
}
@container style(--status: warning) {
  .status {
    background-color: orange;
  }
}

HTML代码：

<section class="card" style="--status: success;">
  <div class="status">成功</div>
</section>
<section class="card" style="--status: error;">
  <div class="status">失败</div>
</section>
<section class="card" style="--status: warning;">
  <div class="status">警告</div>
</section>