CSS 函数使用

函数	描述	版本
attr()	返回选择元素的属性值。	CSS2
var()	用于插入自定义的属性值。	CSS3
calc()	允许计算 CSS 的属性值，比如动态计算长度值。	CSS3
cubic-bezier()	定义了一个贝塞尔曲线(Cubic Bezier)。	CSS3
hsl()	使用色相、饱和度、亮度来定义颜色。	CSS3
hsla()	使用色相、饱和度、亮度、透明度来定义颜色。	CSS3
rgb()	使用红®、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。	CSS2
rgba()	使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。	CSS3
linear-gradient()	创建一个线性渐变的图像。	CSS3
radial-gradient()	用径向渐变创建图像。	CSS3
repeating-linear-gradient()	用重复的线性渐变创建图像。	CSS3
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。	CSS3

attr()

attr() 函数返回选择元素的属性值。

<style>
  div::before{
  	content: attr(name)attr(v);
  	color:red;
  }
  div::after{
  	content: "["attr(title)"]";
  	color:#999;
  }
</style>

<div name="HTML" v="5" title="说明">语言</div>

显示结果：

var()

var() 函数用于插入自定义的属性值。

语法 var(name, value)
name 必需。自定义属性的名称，必需以 --开头。
value 可选。备用值，在属性不存在的时候使用。

:root {
  --my-color1: red;
  --my-color2: green;
}
div{
  color: var(--my-color1);
  background-color: var(--my-color2);
}

calc()

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

例：使用 calc() 函数计算元素宽度

div{
  height:50px;
  width: calc(100% - 50px);
}

cubic-bezier()

ubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。
语法：cubic-bezier(x1,y1,x2,y2) 数字值参数且必需，x1 和 x2 需要是 0 到 1 的数字。

例：从开始到结束的不同速度过渡效果

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

hsl()

hsl() 函数使用色相、饱和度、亮度来定义颜色。
HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

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

HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。

语法 hsl(hue, saturation, lightness)

参数	描述
hue	定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation	定义饱和度; 0% 为灰色， 100% 全色
lightness	定义亮度 0% 为暗, 50% 为普通, 100% 为白

#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%);} /* 浅绿  */
#p3 {background-color:hsl(120,100%,25%);} /* 暗绿  */
#p4 {background-color:hsl(120,60%,70%);} /* 柔和的绿色 */

hsla()

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSL 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

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

语法 hsla(hue, saturation, lightness, alpha)

参数	描述
hue	定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation	定义饱和度; 0% 为灰色， 100% 全色
lightness	定义亮度 0% 为暗, 50% 为普通, 100% 为白
alpha	定义透明度 0（透完全明） ~ 1（完全不透明）

#p1 {background-color:hsl(120,100%,50%,0.3);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%,0.3);} /* 浅绿  */
#p3 {background-color:hsl(120,100%,25%,0.3);} /* 暗绿  */
#p4 {background-color:hsl(120,60%,70%,0.3);} /* 柔和的绿色 */

rgb()

rgb() 函数使用红®、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。
RGB 即红色、绿色、蓝色（英语：Red, Green, Blue）。

红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。

语法 rgb(red, green, blue)

参数	描述
red	定义红色值，取值 0 ~ 255，也可以使用百分比 0% ~ 100%。
green	定义绿色值，取值 0 ~ 255，也可以使用百分比 0% ~ 100%。
blue	定义蓝色值，取值 0 ~ 255，也可以使用百分比 0% ~ 100%。

#p1 {background-color:rgb(255,0,0);} /* 红 */
#p2 {background-color:rgb(0,255,0);} /* 绿 */
#p3 {background-color:rgb(0,0,255);} /* 蓝 */

rgba()

rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
透明度（A）取值 0~1 之间， 代表透明度。

语法 rgba(red, green, blue, alpha)

参数	描述
red	定义红色值，取值 0 ~ 255，也可以使用百分比 0% ~ 100%。
green	定义绿色值，取值 0 ~ 255，也可以使用百分比 0% ~ 100%。
blue	定义蓝色值，取值 0 ~ 255，也可以使用百分比 0% ~ 100%。
alpha	定义透明度 0（透完全明） ~ 1（完全不透明）

#p1 {background-color:rgba(255,0,0,0.3);} /* 红 */
#p2 {background-color:rgba(0,255,0,0.3);} /* 绿 */
#p3 {background-color:rgba(0,0,255,0.3);} /* 蓝 */

linear-gradient()

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

语法 linear-gradient(direction, color1, color2, ...);

参数	描述
direction	用角度值指定渐变的方向（或角度）。
color1,…	用于指定渐变的起止颜色。

.div1{ background:linear-gradient(0deg,red,blue); }
.div2{ background:linear-gradient(10deg,red,blue); }
.div3{ background:linear-gradient(90deg,red,blue); }
.div4{ background:linear-gradient(180deg,red,blue); }
.div5{ background:linear-gradient(to left,red,blue); }
.div6{ background:linear-gradient(to bottom right,red,blue); }
.div7{ background:linear-gradient(to right,red,blue,green,yellow); }

/*前面10px区域是红色，20%刻度处是粉色，最末端刻度处是绿色，中间是渐变色*/
.div8{ background:linear-gradient(90deg,red 10px,pink 20%,green); }

显示结果:

radial-gradient()

radial-gradient() 函数用径向渐变创建 “图像”。

语法 radial-gradient(shape size at position, color1, color2,...);

参数	描述
shape	确定圆的类型。 ellipse : (默认)指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-corner : (默认)指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： center：（默认）设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
color1,…	用于指定渐变的起止颜色。

.div1{ background:radial-gradient(at center,red,blue); }
.div2{ background:radial-gradient(circle at center,red,blue); }
.div3{ background:radial-gradient(circle closest-side at center,red,blue); }
.div4{ background:radial-gradient(circle at bottom,red,blue); }
.div5{ background:radial-gradient(circle at center,red,blue,yellow,green); }
.div6{ background:radial-gradient(circle closest-side at center,red,blue,yellow,green); }
.div7{ background:radial-gradient(circle at center,red 10px,yellow 20%,green); }
.div8{ background:radial-gradient(circle at center,red 10px,yellow 20%,green 50%); }

显示结果:

repeating-linear-gradient()

repeating-linear-gradient() 函数用于创建重复的线性渐变 “图像”, 语法和 linear-gradient() 相同。

.div1{ 
  background: repeating-linear-gradient(0deg, red, green 10px);
}
.div2{ 
  background: repeating-linear-gradient(20deg, red, green 10px);
}
.div3{ 
  background: repeating-linear-gradient(to left top, red 5px, yellow 8%, green 15px);
}

显示结果:

repeating-radial-gradient()

repeating-radial-gradient() 函数用于创建重复的径向渐变 “图像”, 语法同 radial-gradient()。

.div1{ 
  background: repeating-radial-gradient(red, yellow 8px);
}
.div2{ 
  background: repeating-radial-gradient(circle at center,red, yellow 8px);
}
.div3{ 
  background: repeating-radial-gradient(circle at center,red 10px,pink 20%);
}
.div4{ 
  background: repeating-radial-gradient(circle at center,red 4px, yellow 8px, green 12px);
}

显示结果: