css函数之cubic-bezier()贝塞尔曲线、径向渐变、hsl、hsla

cubic-bezier

可用于animation-timing-function 和 transition-timing-function 属性。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

径向渐变

HSL

HSLA

HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
透明度（A） 取值 0~1 之间， 代表透明度。

attr

返回元素的属性值，括号里添加属性