CSS函数

css有一些内置的函数(方法)。本节内容带大家一起了解一些常用的内置函数。

在前面的章节中,我们已经使用过一些函数了,例如minmax()fit-content()rgb()hsl()以及calc()等。

与其他语言一样,css同样包含一些内置的函数,你可以在页面的任何地方使用它们来修改优化页面的样式。

每个函数都有它各自的目的及用法。本节将对这些函数做个大概的讲解,希望可以帮助你更好的认识和理解css函数。

一.函数是什么?

如果你是个程序员,你肯定知道函数是什么。函数是一段代码的封装,这段代码用于完成某个特定的任务。函数有入口和出口,你可以通过入口传递一些参数给函数,等函数执行完毕,它的执行结果从出口出来。css的函数类似一个加工厂的生产机器,你给它一些原材料(函数参数),它会帮你加工,生产产品(函数返回值)。这里我不做过多介绍。

你可以将函数认为是一个数学公式,例如a+b,向公式传入参数ab的值12,得到结果3

在其他语言(C#、C++、javascript)中,你可以自定义函数使用。但是在css中,你只可以使用css内置的函数。

二.函数选择器

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

伪类中介绍过:is():not()的作用。:is():not()接受的参数为css选择器,它们用于选择和过滤元素。

三.自定义属性和var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

自定义属性也叫做CSS变量。自定义属性名称必须以双横线(--)开头,表示它是一个自定义属性(css变量)。

var()函数接受一个自定义属性名称作为参数,然后返回该自定义变量的值(css样式)。上面的代码,var()函数以--base-color为参数,如果--base-color已经定义,那么var()函数将返回--base-color变量的值。

.my-element {
    background: var(--base-color, hotpink);
}

你还可以给var()函数传递第二个参数,表示如果没有找到--base-color的定义,函数会以hotpink作为返回值(输出)。

四.有返回值的函数

并不是所有函数都有返回值得。var()函数恰好是一个有返回值的函数。attr()url()函数与var()类似,你可以向它们传递一个或者多个参数,然后将它们作为css声明的属性值。

a::after {
    content: attr(href);
}

上面的代码,将<a>元素的href属性值与::after伪类元素的内容绑定,当href属性变化时,::after伪类的内容也会变化。

.my-element {
    background-image: url('/path/to/image.jpg');
}

url()函数接受一个URL字符串,用于加载图片、字体和内容。如果没有传递一个有效的url或者url指示的资源找不到了,那么url()函数不会返回任何值。

五.颜色函数

颜色章节中,我们介绍过与颜色相关的所有函数。如果你还没有看过这篇文章,强烈建议你去看一下。

与颜色相关的函数:rgb()rgba()hsl()hsla()hwb()lab()lch()。它们都接受一些参数,然后返回一个颜色。

六.数学表达式

CSS提供了一些非常有用的数学计算相关的函数。

calc()

calc()接受一个数学表达式作为参数,返回该表达式的结果。

.ele {
    width: calc(100% - 2rem);
}

上面的代码,calc()的计算结果是.ele元素的容器元素的高度减去2rem,然后将结果作为.ele的宽度。

calc函数可以嵌套使用,你还可以将var()函数作为表达式参数的一部分。

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

min()max()

通过名称,就知道这两个函数是用来计算最大值和最小值的,它们都接受两个参数,返回两个数中的最小值和最大值。

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

clamp()

clamp()函数接受三个参数:最小值、理想值、最大值。

clamp(MIN, VAL, MAX)max(MIN, min(VAL, MAX))等价,clamp(MIN, VAL, MAX)的目的是要找到三个数的中间值。

  1. 如果VALMINMAX之间,结果为VAL
  2. 如果VAL小于MIN,结果为MIN
  3. 如果VAL大于MAX,结果为MAX
h1 {
    font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

minmaxclamp在其他语言也有类似的实现,基本用法都是一样的。

七.形状

clip-pathoffset-pathshape-outside属性用于裁剪元素盒子或者为内容提供一个形状区域。它们接受一些css函数作为属性值。

例如一些简单的形状函数,circle()ellipse()inset,还有一些更复杂的函数,例如polygon()

.circle {
    clip-path: circle(50%);
}

.polygon {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

八.变换

最后,再介绍下css中的变换。下面所有的变换都是用transform属性实现的。

旋转

你可以使用rotate()函数旋转一个元素,它将一个元素绕其中心轴,旋转一个角度。你可以使用rotateX()rotateY()rotateZ()函数,让元素绕某个特定轴旋转。旋转函数接受degturn或者rad等角度单位值作为参数。

.my-element {
    transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

还有一个rotate3d()函数,接受4个参数,前三个参数是数字,定义X、Y、Z坐标,第四个参数表示角度。

.my-element {
    transform: rotate3d(1, 1, 1, 10deg);
}

缩放

scale()函数用于缩放元素。同样有scaleX()scaleY()scaleZ(),用于缩放不同轴方向的尺寸。

.my-element {
    transform: scaleX(1.2) scaleY(1.2);
}

scale3d()rotate3d()类似,只不过它接受三个参数,分别是X、Y、Z方向的缩放因子。

平移

与旋转,缩放类似。使用translateX()translateY()translateZ()可以分别在x、y、z方向上平移元素,translate3d()可以在一个函数类定义x、y、z方向上平移的量。

偏移

skew()函数可以使元素偏移,如果传递一个参数,它会将元素在x方向上偏移,如果传递两个参数,x和y方向都会发生偏移。可以使用skewX()skewY()单独在某个方向上偏移。

.my-element {
    transform: skew(10deg);
}

translate属性可以接受多个变换函数作为值,例如元素先向x方向平移10px,在向下平移10px,在旋转10deg

.ele {
    transform: translateX(10px) translateY(10px) rotateZ(80deg);;
}

(完)

日期:2021年09月09日
留言(0
发表评论
邮箱地址不会被公开。*表示必填项。
评论(支持部分html标签)*
姓名*
站点