CSS 函数

CSS 中的 hwb() 函数用于使用红、绿、蓝颜色通道定义颜色,根据这些颜色通道的色调、白度和黑度分量。它允许您通过指定这三种基色中每种颜色的强度来指定颜色。

要添加颜色透明度,可以将可选的 alpha 分量传递给 hwb() 函数。

可能的值

hwb() 函数的函数符号为 hwb(H W B[ / A])。

  • H:可以包含表示色调角度的任一格式:

    • <number>:0 到 255 之间的任何数字。

    • <angle>:0deg 到 360deg 之间的任何值。

    • keyword none

  • W:可以包含表示白度的任一格式:

    • <percentage>:指定要混合的白色量。可以具有 0%(无白度)和 100%(全白度)之间的任意值。

    • keyword none

  • B:可以包含表示黑度的任一格式:

    • <percentage>:指定黑色的量混合。可以是 0%(无黑度)和 100%(全黑度)之间的任何值。

    • keyword none

  • A:表示颜色的透明度。它是一个可选值。

    • <alpha-value>:0 到 1 之间的任何数字,其中 1 对应于完全不透明,0 对应于完全透明。

    • keyword none

红、绿、蓝分量的值为在序列化中四舍五入,因为函数符号将其序列化为 sRGB。

语法

hwb(154 25% 50%) | hwb(154deg, 25%, 50%) | hwb(154 25% 50% / 0.5) 

    CSS hwb(): 使用 conic-gradient()

    以下是显示 hwb() 函数在 conic-gradient() 函数中的用法的示例:

    <html>
    <head>
    <style>
       div {
          width: 100px;
          height: 100px;
          border: 2px solid black;
          margin-bottom: 10px;
       }
       .hwb-conic{
          background: conic-gradient(hwb(270 100% 50%),
             hwb(80 20% 20%),
             hwb(0 30% 10% / 0.7),
             hwb(194 0% 0%));
       }
       </style>
    </head>
    <body>
       <p>hwb() with conic-gradient()</p>
       <div class="hwb-conic"></div>
    </body>
    </html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    CSS hwb(): 带或不带 alpha 值

    以下是显示 hwb() 函数用法的示例,其中所有三个值都在带或不带 alpha 值(数字值)的情况下传递:

    <html>
    <head>
    <style>
          div {
          width: 100px;
          height: 100px;
          border: 2px solid black;
          margin-bottom: 10px;
       }
       .color-hwb-1{
          background-color: hwb(70deg 60% 80%);
       }
       .color-hwb-2{
          background-color: hwb(80 20% 20%);
       }
       .color-hwb-alpha-number{
          background-color: hwb(0 30% 10% / 0.7);
       }
       .color-hwb-alpha-percent{
          background-color: hwb(194 0% 0% / 100%);
       }
       </style>
    </head>
    <body>
       <div class="color-hwb-1">hwb(70deg 60% 80%)</div>
       <div class="color-hwb-2">hwb(80 ,20%, 20%)</div>
       <div class="color-hwb-alpha-number">hwb(0 30% 10% / 0.7)</div>
       <div class="color-hwb-alpha-percent">hwb(194 0% 0% / 100%)</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