CSS3 函数

calc() 计算动态长度

calc(xxxx - xxxx)

+ -, *, /
+ 和 - 运算符的两边必须要有空白字符。
任何类型数值都可以使用 calc() 函数进行计算，会自动换算，如百分比与像素值

calc 通过 * -1 实现正负值的转化

calc(var(--circle_radius) / 2 * -1)

var() 变量函数

定义变量：
以--前缀 为固定标识

:root {
  --main-bg-color: coral;
  ...
}
* {
  background-color: var(--main-bg-color);
}

attr() 返回元素属性值

目前支持的仅有伪元素的 content 属性

如可以在内容中显示标签

<a class="blog" href="https://blog.csdn.net/I_fole_you"></a>

.blog::before {
 content: '我的博客：';
}
.blog::after {
  content: attr(href);
}

cubic-bezier() 贝塞尔曲线

颜色函数

rgb()/rgba()
hsl()/hsla()

渐变函数

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

url()

尽量使用引号包裹路径

备注： 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 Firefox bug 752230

counter() 计数器

counter-increment
counter-reset
counter-set

repeat(n, xxx)