这就是 Chrome 上的样子 这就是 Firefox 上的样子
这是我的 CSS 块：
.color-legend {
width: 100px;
height: 20px;
background:
linear-gradient(
to right in oklch decreasing hue,
oklch(100% 0 9) 6% 6%,
oklch(0% 0.5 15) 93% 93%
);
}
我需要它们都看起来像 Chrome 版本。
我尝试使用
-moz-linear-gradient添加了一个 Fallback 块，它适用于 chrome。请看下面的代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Test</title>
<style>
.color-legend {
width: 100px;
height: 20px;
background:
linear-gradient(
to right,
hsl(0, 100%, 50%) 6%,
hsl(120, 100%, 25%) 93%
); /* Fallback */
background:
linear-gradient(
to right in oklch decreasing hue,
oklch(100% 0 9) 6% 6%,
oklch(0% 0.5 15) 93% 93%
);
}
</style>
</head>
<body>
<div class="color-legend"></div>
</body>
</html>