CSS 数据类型

CSS <color-interpolation-method> 数据类型确定在不同 <color> 值之间创建过渡时使用的颜色空间。此数据类型会覆盖 color-mix() 和 Linear-gradient() 等函数的默认颜色混合。

插值颜色空间默认为 Oklab，同时插入颜色值。

可能的值

  • <rectangle-color-space> - 可以使用关键字 srgb、srgb-线性、lab、oklab、XYZ、XYZ-D50 或 XYZ-D65。

  • <polar-color-space> - 可以使用关键字 shsl、hwb、lch 或 oklch。

  • <hue-interpolation-method> -色相插值算法。它默认为较短的色调。它是可选的。

语法

<color-interpolation-method>: <rectangular-color-space> | <polar-color-space> | <hue-interpolation-method>;

    CSS <color-interpolation-method> - Linear-gradient()

    以下示例演示如何使用不同的颜色空间和使用 Linear-gradient() 进行梯度插值 -

    <html>
<head>
<style>
   .srgb-gradient {
      background-image: linear-gradient(
      to right,
      rgb(15, 73, 27),
      rgb(160, 214, 173),
      rgb(63, 138, 13),
      rgb(34, 180, 66),
      rgb(79, 236, 132),
      );
   }
   .oklab-gradient {
      background-image: linear-gradient(
      to right,
      oklab(45.2% -0.032 -0.312),
      oklab(48.7% 0.019 -0.224),
      oklab(52.2% 0.07 -0.137),
      oklab(55.8% 0.122 -0.049),
      oklab(59.3% 0.173 0.038),
      oklab(62.8% 0.225 0.126)
      );
   }
   .oklch-longer-gradient {
      background-image: linear-gradient(
      to right,
      oklch(45.2% 0.313 264),
      oklch(46.8% 0.308 243),
      oklch(48.4% 0.303 221),
      oklch(50% 0.298 200),
      oklch(51.6% 0.293 179),
      oklch(53.2% 0.288 157),
      oklch(54.8% 0.283 136),
      oklch(56.4% 0.278 115),
      oklch(58% 0.273 93),
      oklch(59.6% 0.268 72)
      );
   }
   .gradient {
      height: 60px;
      width: 50%;
   }
   .srgb-gradient {
      background-image: linear-gradient(in srgb to right, green, yellow);
   }
   .oklab-gradient {
      background-image: linear-gradient(in oklab to right, green, yellow);
   }
   .oklch-longer-gradient {
      background-image: linear-gradient(in oklch longer hue to right, green, yellow);
   }
</style>
</head>
<body>
   <div>sRGB:</div>
   <div class="gradient srgb-gradient"></div>
   <div>Oklab:</div>
   <div class="gradient oklab-gradient"></div>
   <div>Oklch Gradient (with longer hue):</div>
   <div class="gradient oklch-longer-gradient"></div>  
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62