css定义变量 --**

Posted 2023-02-24 晚星@

行标签中可以定义参数 --** 表示 ，使用时直接 --a 使用

好处：这样的好处是可以通过一个变量控制全局的样式，可以用于修改主题颜色，位置等。

<style>
ul li 
  position: absolute;
  top: 10px;
  left: 50%;
  list-style: none;
  transform: rotate(calc(30deg * var(--a)));
  transform-origin: 0 240px;

</style>
<ul>
    <li style="--a: 1"><span>1</span></li>
    <li style="--a: 2"><span>2</span></li>
    <li style="--a: 3"><span>3</span></li>
    <li style="--a: 4"><span>4</span></li>
    <li style="--a: 5"><span>5</span></li>
    <li style="--a: 6"><span>6</span></li>
    <li style="--a: 7"><span>7</span></li>
    <li style="--a: 8"><span>8</span></li>
    <li style="--a: 9"><span>9</span></li>
    <li style="--a: 10"><span>10</span></li>
    <li style="--a: 11"><span>11</span></li>
    <li style="--a: 12"><span>12</span></li>
  </ul>