色偷偷超碰_亚洲成肉网_日日干夜夜撸_黄色一级片子_男人午夜视频_久久精品99久久久久久

CSS 幾個特殊的函數(shù)

2020-3-13 seo達(dá)人

CSS 函數(shù)大家多多少少都使用過，比如 rgb() , rgba() , linear-gradient(), radial-gradient() , 等。

今天小編給大家介紹幾個特殊的 css 函數(shù)。

attr() 這是一個很強的函數(shù)，他可以讓數(shù)據(jù)傳輸?shù)侥愕?css 中，不需要借助其他東西。

用法：

<style>

div::before {

content : attr(data-abc);

}

</style>

<div data-abc='我是attr'></div>

calc() 用與動態(tài)計算長度值

給大家展示快速讓子盒子在父盒子中居中的另一種方法：

<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)。在這我就不多描述了，關(guān)于貝塞爾曲線，感興趣的同學(xué)可以自行去了解。

var() 用于插入自定義的 css 屬性值。

用法：和 sass，less 中定義變量的語法相似

<style>

:root {

--abc-- : red;

}

div {

width: 100px;

height: 100px;

background-color: var(--abc--);

}

</style>

<div></div>

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

用法：

counter-reset : item 1；

給定計數(shù)器 item 的初始值1，也可用與復(fù)位。參數(shù) ‘item’ 為計數(shù)器的名稱，后面的 ‘1’ 參數(shù)如果不寫，默認(rèn)是 0。

counter-increment: item 2;

設(shè)定當(dāng)一個 item 計算器發(fā)生時計數(shù)器增加的值。參數(shù) ‘2’為每次計數(shù)增長 2。

counters(item,’-’);

寫在content中，顯示計數(shù)器的值，‘-’ 設(shè)定倆計算器拼接時中間的符號為’-‘。它還有第三個參數(shù)，是list-style-type , 與 css 屬性 list-style-type 是一模一樣的。用與設(shè)定計數(shù)器以什么形式顯示（阿拉伯?dāng)?shù)字，英文大小寫，等）

<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>