css变量

作者：白话少年的痴情梦— 发布日期:2026-04-30 浏览:66

/* 使用 CSS 变量 */

:root {
  --primary-color: #4CAF50;
  --font-size: 16px;
}

body {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--primary-color);
  color: white;
  font-size: calc(var(--font-size) + 2px);
}

解释说明：

:root：选择器表示文档的根元素（即 <html>），在这里定义的变量可以在整个文档中使用。
--primary-color 和 --font-size 是自定义的 CSS 变量，通过 var() 函数引用这些变量。
var(--primary-color) 和 var(--font-size) 分别用于设置背景颜色和字体大小。
calc() 函数可以用来进行简单的数学运算，例如在按钮的字体大小上增加 2px。

上一篇：css 文字下划线

下一篇：css 禁止换行