之前一直以為 css 沒有幾個函數(shù)，今天才發(fā)現(xiàn) css 現(xiàn)在竟然已經(jīng)越來越多了，一起來看看下面這些函數(shù)，你都認(rèn)識多少？

屬性函數(shù)

attr()

背景圖片函數(shù)

linear-gradient()

radial-gradient()

conic-gradient()

repeating-linear-gradient()

repeating-radial-gradient()

repeating-conic-gradient()

image-set()

image()、url()、element()

顏色函數(shù)

rgb()、rgba()、hsl()、

hsla()、hwb()、color-mod()；

圖形函數(shù)

circle()、ellipse()、

inset()、polygon()、path()

濾鏡函數(shù)

blur()、brightness()、contrast()、

drop-shadow()、grayscale()、

hue-rotate()、invert()、

opacity()、saturate()、sepia()；

轉(zhuǎn)換函數(shù)

matrix()、matrix3d()、perspective()、

rotate()、rotate3d()、rotateX()、

rotateY()、rotateZ()、scale()、

scale3d()、scaleX()、scaleY()、

scaleZ()、skew()、skewX()、

skewY()、translate()、translateX()、

translateY()、translateZ()、translate3d()；

數(shù)學(xué)函數(shù)

calc()、min()、

max()、mixmax()、repeat()；

緩動函數(shù)

cubic-bezier()、steps()；

其他函數(shù)

counter()、counters()、

toggle()、var()、 symbols()

比較常用的函數(shù)有下面這些

calc()：允許您執(zhí)行計算以確定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()：函數(shù)返回所選元素的屬性值

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 函數(shù)用于設(shè)定安全區(qū)域與邊界的距離

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