CSS 数据类型 - hex-color

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

<hex-color> 值可以在使用 <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> =	
// The three-value syntax
#RGB 	 	 	 	

// The four-value syntax
#RGBA 	 	 		

// The six-value syntax
#RRGGBB 	 		

// The eight-value syntax
#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>Use of hexadecimal color value</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>Use of hexadecimal color value</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>Use of hexadecimal color value</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>

打印本页