如何使用变量和相对颜色语法创建 CSS 颜色阴影？

使用变量创建 CSS 颜色阴影

通过新的相对颜色语法可以在 CSS 变量中实现 Sass 的 darken() 函数的功能.

使用任何所需的格式定义主颜色变量 (--color-primary)。对于每种色调，使用 hsl() 函数和 calc() 调整原色的亮度 (l) 分量。例如，要创建 5% 深的阴影：

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

同样，创建 10% 深的阴影：

--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));

将 --color-primary 指定给元素的背景。然后，将 --color-primary-darker 和 --color-primary-darkest 应用于悬停、焦点和活动状态。

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

这种方法提供了定义颜色阴影的灵活性，并简化了在 CSS 变量系统中创建一致的配色方案。

以上是如何使用变量和相对颜色语法创建 CSS 颜色阴影？的详细内容。更多信息请关注PHP中文网其他相关文章！