css 函数（简略）与单位

css 函数（简略）

1、基础：content:

attr()，url()， var()， element()， image-set()， 计数器： counter()， counters()

2、颜色：

rgb()，rgba()，hsl()，hsla()，hwb()，lab()，lch()，device-cmyk()，color-mix()，oklab()

3、滤镜：filter:，backdrop-filter：

blur()，brightness()，contrast()，staurate()，sepia()，invert()，grayscale()，drop-shadow()，hue-rotate()

4、渐变：background:

线性：linear-gradient()，repeating-linear-gradient()

径向：radial-gradient()，repeating-radial-gradient()

锥形：conic-gradient()，repeating-conic-gradient()

5、数学：

calc()，min()，max()，clamp()，minmax()

6、图形：shape-outside:，clip-path:

circle()，ellipse()，inset()，polygon()，path()

7、变换：transform:

缩放：scale()，scaleX()，scaleY()，scaleZ()，scale3d()

旋转：rotate()，rotateX()，rotateY()，rotateZ()，rotate3d()

平移：translate()，translateX()，translateY()，translateZ()，translate3d()

倾斜：skew()，skewX()，skewY()

透视：perspective()

矩阵：matrix()，matrix3d()

8、布局：

fit-content()，minmax()，repeat()

9、动画：

cubic-bezier()，steps()

css 长度单位 

1、相对长度

em	相对于应用在当前元素的字体尺寸，一般浏览器字体大小默认为1em=16px，则2em == 32px
ex	依赖于英文字母小 x 的高度
ch	数字 0 的宽度
rem	rem 是根 em的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小
vw	Viewport Width，视窗宽度，1vw=视窗宽度的1%
vh	Viewport Height，视窗高度，1vh=视窗高度的1%
vmin	vw和vh中较小的那个
vmax	vw和vh中较大的那个
%	%百分比

 2、绝对长度

cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in)
pt	point，大约1/72英寸； (1pt = 1/72in)
pc	pica，大约 12pt，1/6英寸； (1pc = 12 pt)