:root 选择器的作用

:root 是一个特殊的 CSS 选择器，表示文档的根元素。在 HTML 中，根元素通常是 <html>。使用 :root 定义的样式可以被整个文档继承，因此它常用于定义全局 CSS 变量。

css
:root {
  --primary-bg: #110815;
  --text-light: #efefef;
  --button-bg: #f1be32;
  --button-hover: #ffac33;
  --button-border: #e5a328;
  --box-shadow: rgba(0, 0, 0, 0.2);
  --transition: 0.3s ease-in-out;
}

代码解释

定义了 7 个 CSS 变量（变量名以 `--` 开头）：

--primary-bg:
值为 #110815，表示一个深紫色的背景颜色。
用途：可以作为页面的主背景色。
--text-light:
值为 #efefef，表示一种浅灰色，用于文本颜色。
用途：可以应用在文字上，使文字看起来轻快且易于阅读。
--button-bg:
值为 #f1be32，表示按钮的背景颜色（亮黄色）。
用途：给按钮设置默认背景色，突出强调。
--button-hover:
值为 #ffac33，表示按钮悬停时的背景颜色（橙黄色）。
用途：当用户将鼠标移到按钮上时，显示悬停效果。
--button-border:
值为 #e5a328，表示按钮的边框颜色。
用途：为按钮增加一个视觉分隔的边框。
--box-shadow:
值为 rgba(0, 0, 0, 0.2)，表示一种半透明的黑色阴影。
用途：给元素增加阴影效果，提升视觉层次感。
--transition:
值为 0.3s ease-in-out，表示动画过渡效果的时间和缓动曲线。
用途：为元素的动态效果（如颜色变化、大小变化等）添加平滑过渡。

如何使用这些变量？

CSS 变量可以通过 var() 函数引用：

css
body {
  background-color: var(--primary-bg); /* 使用全局定义的背景色 */
  color: var(--text-light); /* 使用全局定义的文字颜色 */
}

button {
  background-color: var(--button-bg); /* 使用按钮背景色 */
  border: 1px solid var(--button-border); /* 使用按钮边框颜色 */
  box-shadow: 0 4px 6px var(--box-shadow); /* 使用阴影变量 */
  transition: var(--transition); /* 使用全局定义的过渡效果 */
}

button:hover {
  background-color: var(--button-hover); /* 鼠标悬停时使用的背景色 */
}

优点

全局管理样式：
修改 :root 中的变量值即可统一更新整个项目的相关样式。
代码更易维护：
使用变量代替硬编码的颜色值和其他样式值，可以更方便地调整和复用样式。
支持主题切换：
不同的主题可以定义不同的变量值，轻松实现样式的动态切换。例如：
```
css
:root.dark-theme {
  --primary-bg: #000000;
  --text-light: #ffffff;
}
```

总结

定义一套全局样式变量，使用这些变量可以方便地控制页面的配色、动画和阴影效果。通过变量的灵活性，可以大大提高代码的可读性和可维护性，尤其适用于大规模的项目。

目录

代码解释

定义了 7 个 CSS 变量（变量名以 -- 开头）：

如何使用这些变量？

优点

总结

定义了 7 个 CSS 变量（变量名以 `--` 开头）：