CSS SNIPPET

  返回

常用的自定义变量  其他

包含特定值的CSS变量,可以在文档中重用。

HTML
<p class="custom-variables">CSS is awesome!</p>
CSS
:root {
  /* Place variables within here to use the variables globally. */
}

.custom-variables {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}
效果演示

CSS is awesome!

代码说明
  • :root CSS伪类里定义的变量可以全局使用,它匹配文档树的根元素。 也可以在一个选择符块内定义变量,从而限制变量的作用范围。
  • 使用--variable-name:声明一个变量
  • 使用 var(--variable-name)函数在文档内重用变量。
浏览器支持

96.5%