css定义变量 --**

最新推荐文章于 2024-08-13 14:09:09 发布

晚星@

最新推荐文章于 2024-08-13 14:09:09 发布

阅读量187

点赞数

分类专栏： css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/asd577007722/article/details/126179713

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

行标签中可以定义参数 --** 表示，使用时直接 --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>