胖蔡叨叨叨
你听我说

CSS函数你知道多少?

css中给我们提供很多函数来辅助我们完成css样式的设置,那么你知道CSS函数究竟有多少呢?如何去使用这些函数?本文首先将会对于CSS中已有函数做一个总结性整理,之后会将类似设置函数放在单篇中介绍并提供使用的源码,你可以通过本篇文章链接访问,若存在函数不全、分类存疑又或者使用有误的情况,请评论区告诉我,我将会抽时间进行补充、调整、修改。

CSS函数都有哪些?

由于CSS函数过多,我这里根据它的用途将其分类总结,就不和MDN上一样通过字母顺序来排版了。大致分为:科学计算类、滤镜类、图形图像类、颜色设置类、动画类、其他类。

1、科学计算函数

  • abs():获取参数绝对值。
  • acos():三角函数,反余弦函数。
  • asin():三角函数,反正弦函数 。
  • sin():三角函数,正弦函数 。
  • atan():三角函数,反正切函数。
  • atan2():三角函数,使用两个参数 x 和 y 的反正切函数。
  • cos():三角函数,余弦函数。
  • sqrt():平方根函数。
  • tan():三角函数,正切函数 。
  • calc():允许计算 CSS 的属性值,支持数字、vw、vh、百分比
  • clamp():获取上限和下限之间的中间值。
  • exp():自然对数为底数的指数曲线。
  • hypot():参数平方和的平方根函数。
  • log():实验性。
  • max():从一个逗号分隔的表达式列表中选择最大的值作为属性的值。
  • min():从一个逗号分隔的表达式列表中选择最小的值作为属性的值。
  • minmax():定义了一个长宽范围的闭区间。
  • mod():实验性,阶梯值函数。
  • pow():开方。
  • rem():实验性,阶梯值函数。
  • round():实验性,阶梯值函数。
  • fit-content():元素尺寸接近于内容的尺寸。

2、滤镜类函数

  • blur(radius):为图像设置高斯模糊,默认值为 0,单位为px、rem、em、ex、ic、rlh、vh、vw、vi、vmin、vmax、vb、cm、mm、in、pc等,值较大越模糊
  • brightness(number):number越大图像越亮,number不能取负值,可以是整数也可以是百分比。
  • drop-shadow():为图像添加阴影效果
  • grayscale():将图像转换为灰度图像,默认值为 0%,表示原始图像;100% 表示将图像完全变成灰度图像(即黑白图像),不允许为负值
  • hue-rotate(deg):图像色相旋转
  • invert():反转图像
  • opacity():设置不透明度
  • saturate():调整饱和度
  • sepia():图像转为棕褐色
  • contrast():调整对比度,默认值为 100%,代表原始图像;0% 将使图像完全变黑;当值超过 100% 时图像将获得更高的对比度。

3、图形图像类函数

  • linear-gradient():将线性突变设置为背景图像。定义至多两种色彩(从上到下)
  • radial-gradient():用径向渐变创建图像。
  • conic-gradient():定义了一个圆锥渐变。
  • repeating-linear-gradient():用重复的线性渐变创建图像。
  • repeating-radial-gradient():用重复的径向渐变创建图像。
  • repeating-conic-gradient():重复的圆锥渐变。
  • grayscale():用于对图像应用滤镜以设置图像的灰度。
  • image():指定图像或者图像代替,与url()性能相似,比url减少了一些性能
  • image-set():可以保证图片在不同分辨率设备上的适配,能根据不同的设备类型展示不同的图片。
  • inset():创立一个矩形区域来屏蔽它所利用的元素
  • path():创立一个自定义区域来屏蔽它所利用的元素
  • element():以将元素当作图片渲染
  • url():应用URL来加载内部资源
  • polygon():创立一个多边形区域来屏蔽它所利用的元素
  • repeat():表示轨道列表的重复片段。
  • circle():创立一个圆形区域来屏蔽它所利用的元素
  • cross-fade():背景半透明
  • cubic-bezier():三次方贝塞尔曲线
  • ellipse():用于在椭圆形图片或其他任何图形周围创建浮点数文本。 
  • paint():定义使用 PaintWorklet 生成的图像值。

4、颜色设置函数

  • color():使用 3 种值定义:关键字、RGB 立体坐标系、HSL 圆柱坐标系。
  • device-cmyk():CMYK 代表 Cyan、Magenta、Yellow 和 Key,它们与打印机中的墨水颜色相匹配,使用空格来分隔参数,也可以添加alpha值来设置透明度。
  • hsl():使用色相、饱和度、亮度来定义颜色。
  • hsla():使用色相、饱和度、亮度、透明度来定义颜色。
  • hwb():容许通过指定色彩的色调、白度和黑度重量以及alpha值来指定色彩值。
  • lab():亮度以及决定色调的 a和b值。
  • lch():亮度、色度、色调。
  • rgb():使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。
  • rgba():使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

5、动画类函数

  • steps():阶梯函数。
  • matrix():以一个含六值的(a,b,c,d,e,f)变换矩阵的模式指定一个2D变换,相当于间接利用一个[a,b,c,d,e,f]变换矩阵。
  • matrix3d():定义 3D 转换,应用 16 个值的 4×4 矩阵。
  • perspective():为 3D 转换元素定义透视视图。
  • rotate():指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义。
  • rotate3d():定义 3D 旋转。
  • rotatex():沿着 X 轴的 3D 旋转。
  • rotatey():沿着 Y 轴的 3D 旋转。
  • rotatez():沿着 Z 轴的 3D 旋转。
  • scale():指定对象的2D scale(2D缩放)。
  • scale3d():指定对象的2D scale(3D缩放)。
  • scalex():指定对象X轴的(程度方向)缩放。
  • scaley():指定对象Y轴的(垂直方向)缩放。
  • scalez():指定对象Z轴的(垂直方向)缩放。
  • skewx():指定对象X轴的(程度方向)扭曲。
  • skewy():指定对象Y轴的(垂直方向)扭曲。
  • translate():指定对象的2D translation(2D平移)。
  • translate3d():指定对象的3D translation(3D平移)
  • translatex():指定对象(3D)X轴(程度方向)的平移。
  • translatey():指定对象(3D)Y轴(垂直方向)的平移。
  • translatez():指定对象(3D)Z轴(垂直方向)的平移。

6、属性类函

  • attr():返回选择元素的属性值。
  • toggle():用于模拟鼠标连续单击事件,用于切换效果。实验性功能,暂时不支持~
  • var():可以代替元素中任何属性中的值的任何部分。

7、字体设置函数

  • annotation()
  • character-variant()
  • ornaments()
  • styleset()
  • stylistic()
  • swash()

8、其他类型函数

  • symbols():容许自定义序列号的符号,如 list-style。
  • counter():设置计数器。
  • counters():将计数器的值增加到不同的嵌套层级的元素。
  • env():将用户代理定义的环境变量值插入你的 CSS 中。
  • format():是以一种可读性较高的方式来呈现(排列)CSS中的样式;这样可以便于查看和修改CSS样式。
  • leader()
  • local():实验性功能,后期或许会修改
  • target-counter()
  • target-counters()
  • target-text()

备注:本文会根据后续使用说明来不断完成,如果你发现不能点击,不是因为显示有问题,只是因为我还没整理,感兴趣的也欢迎大家投稿完善。要求:函数用法说明,示例源码提供。

赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » CSS函数你知道多少?
分享到: 更多 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    通过blur函数可以实现简单的图片高斯模糊

    胖蔡1周前 (11-19)回复
  2. #0

    calc()是比较常用的一个css函数

    胖蔡2周前 (11-18)回复

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏