css 变量

作者：铁打的心，也会穿孔，发布日期:2026-02-04 浏览:46

: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()：用于引用 CSS 变量，例如 var(--primary-color) 会获取在 :root 中定义的颜色值。
calc()：用于动态计算值，例如 calc(var(--font-size) + 2px) 会在 var(--font-size) 的基础上增加 2px。

上一篇：css border 虚线

下一篇：css 文字下划线