[分享]css只能显示3个字符

CSS在编写颜色时，常常使用十六进制编码来描述颜色。例如，红色的编码为“FF0000”，蓝色的编码为“0000FF”。然而，有一件事情需要注意，就是CSS只能显示三个字符的十六进制编码。比如说，红色可...

CSS在编写颜色时，常常使用十六进制编码来描述颜色。例如，红色的编码为“#FF0000”，蓝色的编码为“#0000FF”。

然而，有一件事情需要注意，就是CSS只能显示三个字符的十六进制编码。比如说，红色可以简写为“#F00”，而不能简写为“#FF0000”。

这是因为，CSS中的简写十六进制颜色编码只保留了每个颜色通道的高位数字。例如，红色“#FF0000”，其红色通道的高位数字为“F”，对应十进制的数值为“15”。但CSS中用三个字符的“#F00”来表示红色时，CSS只保留了红色通道的高位数字“F”，转换成十进制数值为“15”，其余的“0”则被省略掉了。

/* 正确的简写方式 */
color: #F00;
 
/* 错误的简写方式 */
color: #FF0000; 

使用简写的优点是可以减少代码量，提高代码的可读性。但需要注意的是，简写只适用于每个颜色通道的高位数字相同的情况。例如，“#ABC”可以简写，但“#7EC0B6”就不能简写。