CSS中的color-mix()函数是什么？如何使用它让你的页面更美观？

10 min read

CSS中的color-mix()函数是用于混合两种颜色的函数。它的语法有以下两种：

  1. color-mix(<color>, <color>, <percentage>)：该语法规定了要混合的两种颜色和它们要混合的比例。
  • <color>可以是任何CSS颜色值，比如十六进制、RGB或HSL等。
  • <percentage>是一个介于0%和100%之间的实数，表示要混合的两种颜色的比例。如果该值为0%，则结果将等于第一个颜色；如果该值为100%，则结果将等于第二个颜色；如果该值在0%和100%之间，则结果将是两种颜色的加权平均值。
  1. color-mix(<color>, <color>)：该语法规定了要混合的两种颜色，默认混合比例为50%。

以下是一些使用color-mix()函数的示例：

/* Mix two colors with a 75:25 ratio */
background-color: color-mix(#f00, #00f, 75%);

/* Mix two colors with a 50:50 ratio */
background-color: color-mix(#f00, #00f);

/* Mix two colors with a 25:75 ratio */
background-color: color-mix(#f00, #00f, 25%);

需要注意的是，color-mix()函数是CSS Color Module Level 4中的一个新特性，因此还不是所有浏览器都支持它。