min() / max()

/** 选择参数列表中较小/较大的值 */
.post {
width: min(10rem, 200px);
  height: max(10rem, 200px);
}

clamp()

• 一个值限制在一个上限和下限之间

  /** clamp(最小值、首选值、最大值) */
  .post {
    width: clamp(10rem, 200px, 20rem);
  }
  

color-mix()

/** color-mix() 函数标记接收两个 <color> 值，并返回在指定颜色空间、指定数量混合后的颜色 */
li:nth-child(1) {
  background-color: color-mix(in srgb, red, blue);
}
li:nth-child(2) {
  background-color: color-mix(in srgb, red 25%, blue);
}

<ul>
  <li></li>
  <li></li>
</ul>