CSS内置方法
CSS内置方法
Transform functions
matrix() 矩阵变化
matrix3d() 3D矩阵变化
perspective() 透视距离
rotate() 旋转
1 | |
rotate3d() 3d旋转
rotatex() x轴旋转
rotatey() y轴旋转
rotatez() z轴旋转
scale() 缩放
scale3d() 3d缩放
scalex() x轴缩放
scaley() y轴缩放
scalez() z轴缩放
skew() 倾斜
skewx() x轴倾斜
skewy() y轴倾斜
translate() 平移
translate3d() 3d平移
translatex() x轴平移
translatey() y轴平移
translatez() z轴平移
Math functions
calc() 计算表达式
在声明 CSS 属性值时执行一些计算。
注：+ - 运算符两遍必须要有空白字符。
clamp() 在范围选择合适的值
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
max() 选取最大值
min() 选取最小值
abs() 🔬 计算绝对值(实验)
sign() 🔬 正负判断(实验)
进行计算，如果数值为负，则返回 -1，如果数值为正，则返回 +1，如果数值为 0⁺，则返回 0⁺，如果数值为 0⁻，则返回 0⁻。
Filter functions
blur() 图片模糊
1 | |
brightness() 图片变亮/变暗
contrast() 增加\减少对比度
drop-shadow() 图片背景(类似box-shadow)
grayscale() 图像灰度
hue-rotate() 更改色调
invert() 翻转颜色
opacity() 透明度
saturate() 饱和度
sepia() 使图像变为棕褐色
Color functions
color() 🔬
color-mix() 🔬
color-contrast() 🔬
device-cmyk() 🔬
hsl() hsl颜色
hsla()
hwb() 🔬
lab() 🔬
lch() 🔬
oklab() 🔬
oklch() 🔬
rgb() rgb颜色
rgba()
Image functions
conic-gradient() 锥形渐变
image() 🔬
image-set() 🔬
linear-gradient() 线性渐变
radial-gradient() 径向渐变
repeating-linear-gradient()
repeating-radial-gradient()
repeating-conic-gradient()
cross-fade()
element()
paint()
Counter functions
counter()
counters()
symbols()
Shape functions
circle()
ellipse()
inset()
polygon()
path()
Reference functions
attr()
env()
url()
var()
CSS内置方法
https://www.shaohang.xin/2022/04/03/technical/css/css-functions/