1. attr()
用来选择元素的属性值，用法：attr(html元素的属性名)，正常搭配css content一起使用
html:css:a:after{content:'('attr(href) '/' attr(name) ')'}结果： 十(http://a.b.c / attr)九(http://d.f.e / 我是谁)复制代码
2. calc()
用于动态计算长度值 calc(数学表达式)
-
运算符前后需要有空格
-
不管什么长度都可以用calc计算
-
calc() 支持 '+','-','*','/' 等运算
-
calc() 使用标准的数学运算优先级规则
语法：
width: calc(70% - 60px) height: calc(70% / 2 * 12 + 66px)
3. linear-gradient()
用于 创建一个线性渐变的 图像，需要设置一个起点一个方向，还可以定义角度起始颜色等。
语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);direction: 指定渐变方向的角度 （可以省略）color-stop1： 指定渐变的起止颜色复制代码
示例：
background: linear-gradient(red,yellow,blue,green); // 结果如下，在未设置渐变角度是自上而下的复制代码
示例：
background: linear-gradient(12deg,red,yellow,blue,green); // 结果如下，设置渐变角度后复制代码
示例：
background: linear-gradient(to left top,red,yellow,blue,green); // 结果如下，渐变角度可以从某个方向到另外一个方向复制代码
4. radial-gradient()
用法和linear-gradient()差不多，只不过它是用径向渐变创建图像，渐变由中心点定义，必须设置两个终止色（区别）
语法：
background: radial-gradient(shape size at position, start-color, ..., last-color);shape: 确定圆的类型（选填） - ellispe(默认): 指定椭圆形的径向渐变 - circle： 指定圆形的径向渐变size: 指定径向渐变的大小（选填） - farthest-corner(默认)： 指定径向渐变的半径长度为从圆心到离圆心最远的角 - closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边 - closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角 - farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边position: 定义渐变的位置（选填） - center(默认)：设置中间为径向渐变圆心的纵坐标值 - top：设置顶部为径向渐变圆心的纵坐标值 - bottom：设置底部为径向渐变圆心的纵坐标值start-color, ..., last-color：定义渐变的起止色复制代码
示例：
background: radial-gradient(red, green, blue, yellow); // 结果如下，渐变从中心往外扩散复制代码
示例：
background: radial-gradient( red 5%, green 10%, blue 15%,yellow 20%); // 结果如下，可以单独设置每个颜色的占比复制代码
示例：
background: radial-gradient(circle, red, green, blue, yellow); // 结果如下，径向渐变设置为圆形，默认为椭圆形复制代码
5. repeating-linear-gradient()
创建重复的线性渐变图像
语法：
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);angle: 定义渐变角度（0deg-360deg，默认180deg） side-or-corner: 指定线性渐变起始位置（顺序随意） - 关键字一： 水平位置（left,right） - 关键字而： 垂直位置（top,bottom）color-stop1, color-stop2,... - 指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成复制代码
示例：
background: repeating-linear-gradient(red, yellow 10%, green 20%); // 结果如下，默认自上而下，以及设置颜色的占比复制代码
示例：
background: repeating-linear-gradient(30deg, red 5%, yellow 10%, green 20%);// 结果如下，设置角度后的效果复制代码
欢迎关注 公众号【小夭同学】
ES6入门系列
Git教程