CSS 函数

之前一直以为 css 没有几个函数，今天才发现 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()

比较常用的函数有下面这些

calc()：允许您执行计算以确定CSS属性值

width: calc(100% - 100px);

cubic-bezier()：定义Cubic Bezier曲线

transition: width 2s;transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

var()：插入自定义属性的值

:root {  --main-bg-color: coral;}
#div1 {  background-color: var(--main-bg-color);}

attr()：函数返回所选元素的属性值

a:after {  content: " (" attr(href) ")";}

在css中，filter 就是专门用来做各种滤镜的

img {    filter: grayscale(100%);}

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

linear-gradient(线性渐变) 和 radial-gradient(径向渐变)

#grad {  height: 200px;  background-image: linear-gradient(to right, red , yellow);}

env 函数用于设定安全区域与边界的距离

padding-bottom:  env(safe-area-inset-bottom);