CSS 数据类型 - <hue-interpolation-method>

CSS 数据类型<hue-interpolation-method>确定用于色相值之间插值的算法。此方法指定如何根据色轮找到两个色相值之间的中点。它是<color-interpolation-method>数据类型的一个组成部分。

默认色相插值算法在插值<hue>值时，是较短的。

可能的值

一对色相角对应于色轮上的两条半径，它将圆周分成两个可能的插值弧。这两个弧都从第一条半径开始，到另一条半径结束，但它们都朝相反的方向（顺时针和逆时针）移动。

有四种算法来确定用于从色相角对进行插值的弧。例如，对于一对色相角01和02（归一化为[0deg, 360deg]范围），以下算法确定在从01到02插值时使用的弧

较短的 (Shorter)

使用较短的弧。当两条半径重合时，弧退化为一个点。当两个弧的长度相同时

当01 < 02时，使用顺时针弧。
当01 > 02时，使用逆时针弧。

请参考图表了解详情

较长的 (Longer)

使用较长的弧。当两条半径重合时

当01 ≤ 02时，弧变为具有顺时针方向的全圆周。
当01 > 02时，弧变为具有逆时针方向的全圆周。

当两个弧的长度相同时

当01 < 02时，使用顺时针弧。
当01 > 02时，使用逆时针弧。

请参考图表了解详情

递增 (Increasing)

使用顺时针弧。当两条半径重合时，弧退化为一个单点。

请参考图表了解递增算法

递减 (Decreasing)

使用逆时针弧。当两条半径重合时，弧退化为一个单点。

请参考图表了解递增算法

由于只有两个弧可以选择，因此这些算法在某些情况下是等效的，例如

当0deg < 02 - 01 < 180deg或02 - 01 < -180deg时，较短的和递增的等效，较长的和递减的等效。
当-180deg < 02 - 01 < 0deg或02 - 01 > 180deg时，较短的和递减的等效，较长的和递增的等效。

关于递增和递减插值算法需要注意的一点是，当色相角差在过渡或动画过程中穿过180deg时，弧不会像较短的和较长的插值算法那样翻转到另一侧。

语法

<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue

CSS <hue-interpolation-method> - 算法比较

在下面的示例中使用 linear-gradient() 来演示色相插值方法的不同算法的比较

<html>
<head>
<style>  
   div {
      width: 200px;
      height: 30px;
   }

   .hsl-plain {
      background: linear-gradient(
         to right in hsl,
         hsl(76deg 100% 50%),
         hsl(20deg 100% 50%)
      );
   }

   .increasing-method {
      background: linear-gradient(
         to right in hsl increasing hue,
         hsl(250deg 100% 50%),
         hsl(30deg 100% 50%)
      );
   }

   .decreasing-method {
      background: linear-gradient(
         to right in hsl decreasing hue,
         hsl(9deg 100% 50%),
         hsl(160deg 100% 50%)
      );
   }

   .shorter-method {
      background: linear-gradient(
         to right in hsl shorter hue,
         hsl(49deg 100% 50%),
         hsl(180deg 100% 50%)
      );
   }
   
   .longer-method {
      background: linear-gradient(
         to right in hsl longer hue,
         hsl(39deg 100% 50%),
         hsl(60deg 100% 50%)
      );
   }
</style>
</head>
<body>
   <div class="hsl-plain">
      <p>HSL</p>
   </div>
   <div class="increasing-method">
      <p>HSL increasing</p>
   </div>
   <div class="decreasing-method">
      <p>HSL decreasing</p>
   </div>
   <div class="shorter-method">
      <p>HSL shorter</p>
   </div>
   <div class="longer-method">
      <p>HSL longer</p>
   </div>
</body>
</html>

打印页面