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>