在 CSS 中,color-mix() 函数可以将两种颜色混合在一起,生成新的颜色。它的语法是:
CSS
color-mix(color-space, color1, color2, weight)
:root {
--color: green;
}
.gradient-button {
background: color-mix(in srgb, var(--color), transparent 70%);
width: 200px;
height: 100px;
border: 1px solid blue;
}
.gradient-button:hover {
background: color-mix(in srgb, var(--color), transparent 60%);
}