CSS FunctionsCSS是一个声明式的语言，主要为标记语言服务。并不具有很强的逻辑能力等。随着CSS的不断变革，

背景

CSS是一个声明式的语言，主要为标记语言服务。并不具有很强的逻辑能力等。随着CSS的不断变革，CSS中也有具有了函数和运算相关的能力。

CSS函数

语法

function-name('参数/符号')

如：

calc(100%-40px)

css函数不完全列表：

属性函数：attr()
背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()
颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()
图形函数：circle()、ellipse()、inset()、polygon()、path()
滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()
转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()
数学函数：calc()、min()、max()、mixmax()、repeat()
缓动函数：cubic-bezier()、steps()
其他函数：counter()、counters()、toggle()、var()、 symbols()

介绍几种相对较常用的CSS函数

attr()

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

<span class="tooltip-toggle" 
      aria-label="Sample text for your tooltip!" 
      tabindex="0"> 

.tooltip-toggle::before { content: attr(aria-label); }

示例1 示例2

calc()

calc()可以说是一个计算器，我们可以在里面运行我们的计算表达式。

.element {   
  width: calc(expression);  
}

image()

功能和url()函数类似，只是功能更为强大。可以指定回退图像，对具有方向的图像进行注释等。

.special { color: white; 
	background: image("dark.png", black); }

类似于background-image通过url()加载失败时，采用background-color做为降级。

image(ltr "arrow.png")
image(rtl "arrow.png")

补充：关于ltr和rtl

element()

可以将网站中的某部分当作图片渲染（仅Firefox支持这个特性）

<div id="css-source"> 
	<p>Lorem ipsum</p> 
   	<img src="" alt="">
</div> 
<div id="css-result"></div> 
#css-result { background: element(#css-source); 
		background-size: 50% 50%; }

示例

滤镜函数

filter可以用来做各种滤镜（webkit支持，高版本）

element {
  filter: none | <filter-function > [ <filter-function> ]* 
}

滤镜函数：模糊blur()、亮度brightness()、对比度contrast()、阴影drop-shadow()、灰度grayscale()、hue-rotate()、invert()、透明度opacity()、saturate()、sepia()

grayscale{-webkit-filter:grayscale(1);}

转换函数

转换函数指的是CSS的transform中用到的属性值。

示例

数学函数

calc() 前面介绍了
min() 最小值
max() 最大值
clamp()
minmax() 最小最大值范围

toggle()

该函数允许后代元素循环遍历一个值列表(浏览器仍不支持)

ul{list-style-type:disk;}
li > ul{list-style-type:toggle(disk,circle,square,box);}

var()

用来调用CSS中自定义属性

:root { --color: red } 

.test { color: var(--color) }

其他

counter()、counters()、toggle()、var()和symbols()

CSS Functions

背景