CSS 播客 - 020:函数
到目前为止,您已经了解了几个 CSS 函数。
在 grid 模块中,
我们向您介绍了minmax()
和fit-content()
,
以帮助您调整元素大小
在 color 模块中,
您了解了 rgb()
和 hsl()
,它们可帮助您定义颜色。
与许多其他编程语言一样 CSS 有很多内置函数 以便在需要时随时访问
每个 CSS 函数都有特定用途 在本课程中,您将大致了解 让您更好地了解它们的使用位置和使用方法。
什么是函数?
函数是一段命名的自包含代码,用于完成特定任务。 为函数命名,您可以在代码中调用该函数,也可以将数据传递到该函数中。 这称为传递参数。
很多 CSS 函数都是纯函数,
也就是说,如果您将相同的实参传入它们,
它们将始终返回相同的结果
而无论其他代码中发生的情况如何
当 CSS 中的值发生变化时,这些函数通常会重新计算,
类似于语言中的其他元素,
例如经过计算的级联值,如 currentColor
。
在 CSS 中,您只能使用所提供的函数 而不是自行编写 但在某些上下文中,函数可以相互嵌套, 从而赋予他们更大的灵活性 我们将在本单元后面的部分对此进行详细介绍。
功能选择器
.post :is(h1, h2, h3) {
line-height: 1.2;
}
在
伪类模块
这类详细函数
:is()
和
:not()
。
传入这些函数的参数是 CSS 选择器
然后接受评估
如果有元素匹配,
CSS 规则的其余部分将应用于它们。
自定义属性和 var()
:root {
--base-color: #ff00ff;
}
.my-element {
background: var(--base-color);
}
自定义属性是一个变量,可让您对 CSS 代码中的值进行标记化处理。
自定义属性也会受到级联的影响
这意味着可以在上下文中对其进行操纵或重新定义。
自定义属性必须带有两个短划线 (--
) 前缀,并且区分大小写。
var()
函数具有一个必需的参数:
尝试作为值返回的自定义属性。
在上面的代码段中,var()
函数将 --base-color
作为实参传递。
如果定义了 --base-color
,则 var()
将返回相应值。
.my-element {
background: var(--base-color, hotpink);
}
您还可以将后备声明值传入 var()
函数。
也就是说,如果找不到 --base-color
,
系统将改为使用传递的声明,在此示例中为 hotpink
颜色。
返回值的函数
var()
函数只是返回值的 CSS 函数之一。
类似函数
attr()
和
url()
采用与 var()
类似的结构:
您可以传递一个或多个实参,并将其用在 CSS 声明的右侧。
a::after {
content: attr(href);
}
这里的 attr()
函数
接受的是 <a>
元素的 href
属性的内容
并将其设为 ::after
伪元素的 content
。
如果要更改 <a>
元素的 href
属性的值,
相应更改会自动反映在此 content
属性中。
.my-element {
background-image: url('/path/to/image.jpg');
}
url()
函数接受一个字符串网址,用于加载图片、字体和内容。
如果未传入有效网址或找不到该网址指向的资源,
url()
函数将不会返回任何内容。
颜色函数
您已经在 color 模块中全面了解了颜色函数。 如果您尚未阅读该指南,我们强烈建议您阅读。
CSS 中可用的一些颜色函数包括
rgb()
、rgba()
、hsl()
、hsla()
、hwb()
、lab()
和lch()
。
所有这些变量都具有相似的形式,其中传入配置参数,然后返回颜色。
数学表达式
与许多其他编程语言一样 CSS 提供了实用的数学函数来协助执行各种类型的计算。
calc()
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
calc()
函数将单个数学表达式作为其参数。
这个数学表达式可以有多种类型,
例如长度、数量、角度和频率。单位也可以混用。
.my-element {
width: calc(100% - 2rem);
}
在此示例中,calc()
函数用于调整元素的宽度
与其包含的父元素完全相同,
然后从该计算值中移除 2rem
。
:root {
--root-height: 5rem;
}
.my-element {
width: calc(calc(10% + 2rem) * 2);
height: calc(var(--root-height) * 3);
}
calc()
函数可以嵌套在另一个 calc()
函数内。
您还可以将自定义属性作为表达式的一部分在 var()
函数中传递。
min()
和max()
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
min()
函数返回一个或多个传递的参数的最小计算值。
max()
函数执行相反操作:获取传递的一个或多个参数的最大值。
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
在此示例中
宽度应为 20vw
之间的最小值
(占视口宽度的 20%)和 30rem
。
高度应为 20vh
之间的最大值
(占视口高度的 20%)和 20rem
。
clamp()
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
clamp()
函数有三个参数:最小大小、
理想尺寸和最大值
h1 {
font-size: clamp(2rem, 1rem + 3vw, 3rem);
}
在此示例中,font-size
将根据视口的宽度调整为自适应尺寸。
向 rem
单元添加了 vw
单元,用于协助缩放屏幕,
因为无论缩放级别如何,vw
单元的大小都相同。
乘以 rem
的单位(根据根字号):
为 clamp()
函数提供相对计算点。
如需详细了解 min()
、max()
和 clamp
() 函数,请参阅
这篇文章。
形状
通过
clip-path
、
offset-path
和
shape-outside
CSS 属性使用形状在视觉上裁剪您的 Box,或提供一种形状以便内容四处流动。
有一些形状函数可与这两个属性一起使用。
简单的形状,例如
circle()
、
ellipse()
和
inset()
并采用配置参数来调整它们的大小
更复杂的形状,如
polygon()
采用以英文逗号分隔的 X 轴和 Y 轴值对来创建自定义形状。
.circle {
clip-path: circle(50%);
}
.polygon {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
与 polygon()
一样,还有一个 path()
函数,该函数接受 SVG 填充规则作为参数。
这支持使用图形工具绘制高度复杂的形状
例如 Illustrator 或 Inkscape
然后将该文件复制到您的 CSS 代码中
转换
在此 CSS 概述中,最后是转换函数,
从而歪曲、调整大小甚至改变元素深度。
以下所有函数都与 transform
属性一起使用。
旋转
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
您可以使用
rotate()
函数,它会围绕元素的中心轴旋转元素。
您还可以使用
rotateX()
、
rotateY()
和
rotateZ()
函数沿特定轴旋转元素。
您可以传递角度、转角和弧度单位来确定旋转角度。
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d()
函数有四个参数。
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
前 3 个参数为数字,用于定义 X、Y 和 Z 坐标。 第四个参数是旋转, 与其他旋转函数一样,接受角度、角度和旋转。
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
扩缩
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
您可以使用 transform
和
scale()
函数。
该函数接受一个或两个数字作为确定正缩放或负缩放的值。
如果您只定义一个数字参数,
X 轴和 Y 轴都会以相同的比例缩放,并且两者都定义了 X 轴和 Y 轴的简写形式。
与rotate()
一样,
你有
scaleX()
,
scaleY()
和
scaleZ()
函数改为在特定轴上缩放元素。
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
与 rotate
函数一样,还有一个
scale3d()
函数。
这与 scale()
类似,但它使用三个参数:X、Y 和 Z 缩放比例。
翻译
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
translate()
函数可在保持元素在文档流中的位置不变的同时移动元素。
它们接受长度值和百分比值作为参数。
如果定义了一个实参,translate()
函数会沿着 X 轴平移元素,
并沿 X 轴和 Y 轴平移元素(如果这两个参数都已定义)。
.my-element {
transform: translatex(40px) translatey(25px);
}
您可以像处理其他转换函数一样,对特定轴使用特定函数,
使用
translateX
、
translateY
和
translateZ
。
您还可以使用
translate3d
让您可以在一个函数中定义 X、Y 和 Z 平移。
偏差
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
您可以使用
skew()
接受角度作为参数的函数。
skew()
函数的工作方式与 translate()
非常相似。
如果只定义一个参数,它只会影响 X 轴,如果同时定义两个参数,
会影响 X 轴和 Y 轴
您还可以使用
skewX
和
skewY
可单独影响每个轴。
.my-element {
transform: skew(10deg);
}
车头朝上
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
最后,您可以使用
perspective
属性
(属于转换系列属性的一部分)来更改用户与 Z 平面之间的距离。
这给人一种距离感,并可用于在设计中创建景深。
这个示例由 David Desandro 撰写,摘自一篇非常实用的文章,展示了如何使用它。
以及 perspective-origin-x
和 perspective-origin-y
属性来打造真正的 3D 体验。
动画函数、渐变和滤镜
CSS 还提供一些功能,可帮助您为元素添加动画, 对它们应用渐变效果,并使用图形滤镜来调整它们的外观。 为使本单元尽可能简洁 它们在关联的模块中进行了介绍 它们都采用与本单元所演示函数类似的结构。
检查您的理解情况
测试您对函数知识的掌握情况
CSS 函数可通过哪些字符来识别?
[]
:
{}
()
::
CSS 有内置数学函数?
calc()
函数可以放在另一个 calc()
内,如 font-size: calc(10px + calc(5px * 3));
以下哪些是 CSS 形状函数?
rect()
inset()
ellipse()
circle()
polygon()
square()