CSS 函数

函数	描述	CSS 版本
attr()	返回选择元素的属性值	2
calc()	允许计算 CSS 的属性值，比如动态计算长度值	3
linear-gradient()	创建一个线性渐变的图像	3
radial-gradient()	用径向渐变创建图像	3
repeating-linear-gradient()	用重复的线性渐变创建图像	3
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像	3

1. attr()

• attr() 函数返回选择元素的属性值。
• 感觉也没什么很需要的业务场景，说实话我也不知道有什么卵用。不过发现这样能够限制文本被复制，不知道有没有什么用。

<a href="https://www.baidu.com/">百度</a> <br>
<span title="https://blog.youkuaiyun.com/fukaiit">fukaiit</span>
<div data-msg="我是通过attr显示的内容"></div>

a::after{
	content: attr(href);
}
span::after{
	content: attr(title);
}
div::before{
	content: attr(data-msg);
}

2. calc()

https://blog.youkuaiyun.com/fukaiit/article/details/100601880#2_CSS3_calc_76

3. linear-gradient()

• 线性渐变
• 语法：linear-gradient(direction, color-stop1, color-stop2, ...)
• direction：指定渐变的方向：
  • to left 加浏览器前缀的私有属性不需要"to"
  • to bottom right 加浏览器前缀的私有属性不需要"to"
  • 180deg

/*to right*/
background: linear-gradient(to right, red, yellow, green);
/*to 右下角*/
background: linear-gradient(to bottom right, red, yellow, green);
/*0deg就是坐标系的0度位置*/
background: linear-gradient(45deg, red, yellow, green);
/*使用rgba颜色实现透明渐变*/
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/*支持八位颜色值，效果同rgba颜色*/
background: linear-gradient(to right, #FF000000, #FF0000FF);

4. radial-gradient()

• 径向渐变
• 语法：radial-gradient(shape size at position, start-color, ..., last-color)，这是标准语法，加浏览器前缀的私有属性有所不同，可以需要的时候再查
• shape：圆的类型：
  • ellipse (默认): 椭圆形
  • circle ：圆形
• size：半径长度，从圆心到：
  • farthest-corner (默认) : 离圆心最远的角
  • closest-side ：离圆心最近的边
  • closest-corner ： 离圆心最近的角
  • farthest-side ：离圆心最远的边
• position：圆心位置，可以写百分百值
  • center（默认）
  • top
  • bottom

background: radial-gradient(red 5%, yellow 20%, green 50%);
background: radial-gradient(circle, red 5%, yellow 20%, green 50%);
background: radial-gradient(at top, red 5%, yellow 20%, green 50%);
background: radial-gradient(at 25% 75%, red 5%, yellow 20%, green 50%);
background: radial-gradient(closest-side at 25% 75%, red 5%, yellow 20%, green 50%);

5. repeating-linear-gradient()

• 重复线性渐变
• 类似linear-gradient()，具有相同参数；只是给颜色加上百分比或者像素值后，就会重复；而不是像linear-gradient，不足的部分会用最后一种颜色填充（这个颜色的设置有点迷糊，需要时再查吧）
• 做一个斑马线的效果如下：

background: repeating-linear-gradient(45deg, black, black 20px, white 20px, white 40px);

6. repeating-radial-gradient()

• 重复径向渐变
• 类似radial-gradient()；只是给颜色加上百分比或者像素值后，就会重复；而不是像radial-gradient，不足的部分会用最后一种颜色填充

学习地址：菜鸟教程CSS 函数