attr()
动态读取选择元素的属性值。attr里面不能包含引号
<style>
p[data-make]:before{
content: attr(data-make);
color: red;
}
p.join[data-make]:before{
content: "[进行字符串拼接 " attr(data-make) "]";
color: green;
}
</style>
<p data-make="line0">第一行</p>
<p data-make="line2">第二行</p>
<p class="join" data-make="line3">第三行</p>
calc()
用于动态计算长度值:
- 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)
- 任何长度值都可以使用calc()函数进行计算
- calc()函数支持 "+", "-", "*", "/" 运算
- calc()函数使用标准的数学运算优先级规则
linear-gradient()
渐变
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red,yellow,blue);
background: -o-linear-gradient(red,yellow,blue);
background: -moz-linear-gradient(red,yellow,blue);
background: linear-gradient(red,yellow,blue);
}
其他渐变相关的函数:
- radial-gradient()
- repeating-linear-gradient()