关于CSS中函数的使用----var()函数 与 attr()函数

1 关于var()函数使用注意点:

　　这个函数的作用获取自定义属性的值

　　

　　关于自定义属性:

　　1 出现位置

　　　　要么在

　　　　　　<style>

　　　　　　　　body{

　　　　　　　　　　--self-property: 1;

　　　　　　　　}

　　　　　　</style>

　　　　要么在

　　　　<div style="--self-property: 1"></div>

　　总之必须要在style中

　　2 格式要求:

　　　　自定义属性必须要加上   --    前缀来标明这是一个自定义属性, 否则浏览器无法解析

　　3 获取方式:

　　　　var(--self-property)  直接获取, 不需要加引号, 一般会配合calc()函数来使用

　　4 高级使用案例

<div class="wavy">
  <span style="--i:1">内</span>
  <span style="--i:2">容</span>
  <span style="--i:3">加</span>
  <span style="--i:4">载</span>
  <span style="--i:5">中</span>
  <span style="--i:6">.</span>
  <span style="--i:7">.</span>
  <span style="--i:8">.</span>
</div>


.wavy span{
      position: relative;
      display: inline-block;
      color: #ffffff;
      font-size: 2em;
      animation: animate 1s ease-in-out infinite;
      animation-delay: calc(.1s*var(--i));
    }

　　这个直接通过使用CSS中的var()函数就完成了不同的元素的属性设置问题, 极具参考价值,

　　这个案例主要是展示了如果通过CSS获取一个元素在父元素中的位置,   极具参考价值

 

　　5 关于作用域的猜测, 感觉自定义属性会有一个类似于作用域的东西, 从最近层开始寻找, 找到了就获取值, 找不到逐级往上寻找, 直到找到为止

　　　　　　　　

 

 

2 关于attr()函数使用注意点

　　attr()函数与var()函数有一个很大的相同之处, 都是获取属性值, 

　　两个函数的不同点:

　　　　var()函数必须要获取内联属性, 即必须要是在啊style中的属性

　　　　attr()函数需要获取的标签中的属性, 也可以是自定义属性, 但是必须要是在标签中的属性

 

　　　　1 出现位置

　　　　<div self-property="value"></div>

　　　　2 获取方式

　　　　attr(self-property)