CSS 函数(2026 超详版)

CSS 函数
数学函数
calc() 执行数学运算,计算 CSS 属性值
max() 返回一组值中的最大值
min() 返回一组值中的最小值
clamp() 将值限制在指定的最小值、首选值和最大值范围内
颜色函数
rgb() 定义红、绿、蓝三原色的颜色值
rgba() 定义红、绿、蓝三原色及透明度的颜色值
hsl() 通过色相、饱和度、亮度定义颜色
hsla() 通过色相、饱和度、亮度及透明度定义颜色
color-mix() 混合两种颜色并指定混合比例
渐变函数
linear-gradient() 线性渐变(沿直线方向)
radial-gradient() 径向渐变(从中心点向外扩散)
conic-gradient() 圆锥渐变(围绕中心点旋转)
变换函数
translate() 平移(水平方向和垂直方向)
translateX() 平移(只在水平方向)
translateY() 平移(只在垂直方向)
scale() 缩放(水平方向和垂直方向)
scaleX() 缩放(只在水平方向)
scaleY() 缩放(只在垂直方向)
skew() 倾斜(水平方向和垂直方向)
skewX() 倾斜(只在水平方向)
skewY() 倾斜(只在垂直方向)
rotate() 旋转
matrix() 通过 2D 变换矩阵定义复杂的变换效果
perspective() 设置 3D 变换的透视效果
滤镜函数
blur() 使用高斯模糊
brightness() 改变亮度
contrast() 改变对比度
drop-shadow() 使用阴影
grayscale() 改变灰度
hue-rotate() 改变色相
invert() 反转颜色
opacity() 改变透明度
saturate() 改变饱和度
sepia() 将元素转换为复古色调
动画函数
cubic-bezier() 定义基于贝塞尔曲线的动画缓动效果
steps() 定义分步动画,使过渡以离散步骤进行
其他函数
var() 引用自定义 CSS 变量的值
url() 指定外部资源的地址(如图片或字体)
attr() 获取元素指定属性的值,并用于 CSS
counter() 显示计数器的值,通常用于编号

上一篇: 没有了

下一篇: calc()

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号