因为css标准颜色 aliceblue 在各家浏览器中渲染明度完全相同，是由于它被定义为固定的十六进制色值 #f0f8ff，所有浏览器都严格遵循这一规范进行解析和渲染。
CSS标准颜色是如何定义的？
CSS标准颜色是通过预定义的名称映射到具体的RGB或HEX值来实现的。例如，aliceblue 对应的是 #F0F8FF，即红色分量240、绿色分量248、蓝色分量255。这种映射关系在CSS Color Module Level 3及后续版本中被标准化，确保跨平台一致性。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>AliceBlue Test</title>
<style>
body {
background-color: aliceblue;
margin: 0;
padding: 20px;
font-family: sans-serif;
}
.color-box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
.label {
margin-top: 5px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="color-box" style="background-color: aliceblue;"></div>
<div class="label">aliceblue</div>
<div class="color-box" style="background-color: #F0F8FF;"></div>
<div class="label">#F0F8FF</div>
</body>
</html>预期结果：两个色块在Chrome、Firefox、Safari等主流浏览器中显示为相同的浅蓝色，明度和饱和度一致。
立即学习“前端免费学习笔记（深入）”；
为什么不同浏览器不会改变这个颜色？
浏览器厂商在实现CSS解析器时，必须遵守W3C或WHATWG制定的标准。对于像 aliceblue 这样的标准颜色名，其对应的RGB值是硬编码在浏览器引擎中的，不会因操作系统、硬件或用户设置而改变。这是为了确保网页设计的一致性和可预测性。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Color Consistency Check</title>
<script>
window.onload = function() {
const computedStyle = getComputedStyle(document.body);
const bgColor = computedStyle.backgroundColor;
console.log('Computed background color:', bgColor);
// Expected output: rgb(240, 248, 255)
};
</script>
</head>
<body style="background-color: aliceblue;">
<p>Open console to see computed color.</p>
</body>
</html>预期结果：在所有支持CSS3的浏览器中，控制台输出均为 rgb(240, 248, 255)，证明颜色值未被修改。
如果用户启用了深色模式，aliceblue会变化吗？
不会。CSS标准颜色如 aliceblue 是静态值，不受系统级主题（如深色模式）影响。只有使用语义化颜色变量（如 var(--bg-color)）或通过媒体查询动态切换背景时，颜色才可能随主题变化。但直接使用 aliceblue 始终返回 #F0F8FF。
