CSS 数据类型

CSS 数据类型 <hex-color> 用于使用表示为十六进制数字的原色分量（红、绿、蓝）及其透明度来描述 sRGB 颜色的十六进制颜色语法。

无论何时使用 <hex-color>，都可以使用 <hex-color> 值。

可能的值

CSS 数据类型 <hex-color> 使用以下值之一定义:

  • R 或 RR:颜色的红色分量。它是介于 0 和 ff (255) 之间的不区分大小写的十六进制数。当传递单个数字时，它是重复的； 2 表示 22。

  • G 或 GG:颜色的绿色成分。它是介于 0 和 ff (255) 之间的不区分大小写的十六进制数。当传递单个数字时，它是重复的； c 表示 cc。

  • B 或 BB:颜色的蓝色分量。它是介于 0 和 ff (255) 之间的不区分大小写的十六进制数。当传递单个数字时，它是重复的； 8 表示 88。

  • A 或 AA:颜色的 Alpha 分量，表示透明度。它是介于 0 和 ff (255) 之间的不区分大小写的十六进制数。当传递单个数字时，它是重复的； e 表示 ee。 0或00表示完全透明的颜色，f或ff表示完全不透明的颜色。

语法

<hex-color> = 
// 三值语法
#RGB        

// 四值语法
#RGBA       

// 六值语法
#RRGGBB     

// 八值语法
#RRGGBBAA

注意:不区分大小写的语法意味着，#00ff00 相当于#00FF00。

CSS <hex-color>: 十六进制值

以下示例演示了 <hex-color> 值 的使用:

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

   .basic-hex-value {
      background: conic-gradient(#ff0000, #367899);
      border-radius: 50%;
   }
</style>
</head>
<body>
   <h1>使用十六进制颜色值</h1>
   <div class="basic-hex-value"></div>
</body>
</html>

CSS <hex-color>: 显示语法选项

以下示例演示 <hex-color> 值的不同语法:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
   }

   .small-hex-value {
      background-color: #f56;
   }

   .cap-hex-value {
      background-color: #F56;
   }

  .small-six-hex {
    background-color: #ff5566;
  }

  .cap-six-hex {
    background-color: #FF5566;
  }  
</style>
</head>
<body>
   <h1>使用十六进制颜色值</h1>
   <div class="small-hex-value">#f56</div>
   <div class="cap-hex-value">#F56</div>
   <div class="small-six-hex">#ff5566</div>
   <div class="cap-six-hex">#FF5566</div>
</body>
</html>

CSS <hex -color>: alpha 值

以下示例演示了带有 alpha 值的 <hex-color> 的不同语法:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      border: 1px solid black;
   }

   .small-hex-value {
      background-color: #f560;
   }

   .cap-hex-value {
      background-color: #F56F;
   }

  .small-six-hex {
    background-color: #ff556610;
  }

  .cap-six-hex {
    background-color: #FF5566FF;
  }  
</style>
</head>
<body>
   <h1>使用十六进制颜色值</h1>
   <div class="small-hex-value">#f560</div>
   <div class="cap-hex-value">#F56F</div>
   <div class="small-six-hex">#ff556610</div>
   <div class="cap-six-hex">#FF5566FF</div>
</body>
</html>