CSS 函數(shù)
之前一直以為 css 沒有幾個函數(shù)，今天才發(fā)現(xiàn) css 現(xiàn)在竟然已經(jīng)越來越多了，一起來看看下面這些函數(shù)，你都認識多少？
屬性函數(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);