CSS 幾個特殊的函數

CSS 函數大家多多少少都使用過，比如 rgb() , rgba() , linear-gradient(), radial-gradient() , 等。
今天小編給大家介紹幾個特殊的 css 函數。

• attr() 這是一個很強的函數，他可以讓數據傳輸到你的 css 中，不需要藉助其他東西。
  • 用法：

  <style>
  div::before {
  	content : attr(data-abc);
  }
  </style>
  <div data-abc='我是attr'></div>
  

• calc() 用與動態計算長度值
  • 給大家展示快速讓子盒子在父盒子中居中的另一種方法：

   <style>
    .father {
          position: relative;
          width: 300px;
          height: 300px;
          background-color: pink;
      }
      .child {
          position: absolute;
          /* 這裏的 50px 爲子盒子寬（高）的一半 */
          top:  calc(50% - 50px);
          left: calc(50% - 50px);
          width: 100px;
          height: 100px;
          background-color: blue;
      }
  </style>
  <div class="father">
     <div class="child"></div>
  </div>
  

• cubic-bezier() 定義了一個貝塞爾曲線(Cubic Bezier)。在這我就不多描述了，關於貝塞爾曲線，感興趣的同學可以自行去了解。
• var() 用於插入自定義的 css 屬性值。
  • 用法：和 sass，less 中定義變量的語法相似

  <style>
  :root {
       --abc-- : red;
  }
     
  div {
      width: 100px;
      height: 100px;
      background-color: var(--abc--);
  }
  </style>
  <div></div>
  

• counters() 這是一個古老但實用的屬性，用與 css 中計數

  用法：
  counter-reset : item 1；
  給定計數器 item 的初始值1，也可用與復位。參數 ‘item’ 爲計數器的名稱，後面的 ‘1’ 參數如果不寫，默認是 0。
  counter-increment: item 2;
  設定當一個 item 計算器發生時計數器增加的值。參數 ‘2’爲每次計數增長 2。
  counters(item,’-’);
  寫在content中，顯示計數器的值，‘-’ 設定倆計算器拼接時中間的符號爲’-‘。它還有第三個參數，是list-style-type , 與 css 屬性 list-style-type 是一模一樣的。用與設定計數器以什麼形式顯示（阿拉伯數字，英文大小寫，等）

  <style>
  ul {
      counter-reset: item 1;
  }
  li:before {
      counter-increment: item 2;
      content: counters(item, "-");
  }
  </style>
  <ul class="test">
      <li> html
          <ul>
              <li> css</li>
              <li> js</li>
          </ul>
      </li>
      <li> Node</li>
      <li> ts</li>
  </ul>
  

  效果展示：