2020-3-13 seo達人
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>