CSS Functions

背景

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()

了解更多

www.quackit.com/css/functio…