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); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
    background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}

其他渐变相关的函数:

  • radial-gradient()
  • repeating-linear-gradient()