随着技术的不断进步，CSS早已经从样式表发展为了拥有很多内置函数的强大工具，这些函数让样式变的更加动态、灵活。本篇文章逐一探讨css的每个函数的功能和用法。
CSS的基础函数 attr() 返回选择元素的属性值
语法：attr(attribute-name) HTML 元素的属性名。
CSS的基础函数 url() 用于引用或包含外部资源，如图像、字体或其他媒体文件
语法：url( [ <string> | <uri> ] )
使用场景：
//1.背景图像
body {
background-image: url('images/background.jpg');
}
//2.字体文件
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
}
//3.列表样式图像
ul li {
list-style-image: url('images/list-bullet.png');
}
//4.光标
body {
cursor: url('images/custom-cursor.cur'), auto;
}
//5.边框
div {
border-image: url('images/border.png') 30% round;
}
使用url()函数的注意事项
- URL必须被引号包围，可以是单引号或双引号。
- 如果资源位于同一服务器上，可以使用相对路径。如果资源位于不同的服务器或互联网上，需要使用完整的URL。
- 浏览器会尝试下载并缓存url()函数中指定的资源，以便在需要时快速访问。
- 如果资源无法加载（例如，由于404错误或跨域问题），则相关的CSS属性可能不会按预期工作。
CSS的基础函数 var() 用于访问CSS自定义属性（CSS变量）的值
CSS 自定义属性允许定义可在整个文档或特定元素范围内重复使用的值。通过使用 var() 函数，可以在样式表中引用这些值，从而实现更灵活和可维护的样式。
语法：CSS 变量的声明以两个连字符（--）开头，后面跟着变量名和值
使用场景 
然后，可以使用 var() 函数来引用这些变量的值。
这样的好处就是把公共样式提取了出来，减少代码重复，后续设计稿变化，改一个地方的颜色就可以应用到全局，另外在做暗黑和亮色的切换时非常适用。
CSS的基础函数 element() 指定的 HTML 元素渲染为 CSS 背景图像
语法：element(id)，其中 id 是必需参数，表示要作为背景图像使用的元素的 ID
假设有一个带有 ID myElement 的元素，可以这样使用 element() 函数：
#someOtherElement {
background-image: -moz-element(#myElement);
}这里，#someOtherElement 的背景图像会被设置为 #myElement 的内容
CSS的基础函数 image-set() 为不同的设备像素比提供不同的图像资源
确保图像在各种设备上都能以适当的分辨率显示。这对于响应式设计和确保图像在不同设备上的清晰度非常有用。
基本语法如下：
image-set(
<image-candidate> [<resolution> [, <image-candidate> [<resolution>]]*
)其中，
.img-responsive {
background-image: image-set(
url('image-320w.jpg') 1x,
url('image-640w.jpg') 2x
);
}在这个例子中，如果设备像素比为 1（标准的非高清设备），浏览器将使用image-320w.jpg。如果设备像素比为 2（如 Retina 屏幕），浏览器将使用image-640w.jpg，这是一个更高分辨率的图像，可以确保在高清设备上显示的清晰度。
CSS的基础函数 counter()、counters() 用于获取和操作计数器的值
CSS计数器是一种可以存储和递增/递减的数字值，通常与列表项、标题、页脚等元素的编号和排序相关。
counter()函数 用于获取指定计数器的当前值。它接受一个参数，即计数器的名称。这个函数的返回值是计数器的当前数值。
selector::before {
content: counter(counter-name);
}其中，selector是想要添加计数器值的元素的选择器，counter-name是之前使用counter-reset和counter-increment定义的计数器的名称。
counters()函数 用于获取多个嵌套计数器的值，并将它们连接成一个字符串。它接受两个或三个参数：计数器名称、分隔符字符串（可选），以及计数器样式（可选）。
selector::before {
content: counters(counter-name, separator);
/* 或者 */
content: counters(counter-name, separator, style);
}- counter-name：计数器的名称。
- separator：一个字符串，用于分隔不同计数器的值。
- style：一个可选参数，指定计数器的显示样式，如decimal（十进制）、upper-roman（大写罗马数字）等。如果省略，将使用默认的十进制样式。
假设有一个嵌套列表，想要显示每个列表项的编号，包括所有嵌套的级别。我们可以使用counters()函数来实现这一点。
/* 重置计数器 */
ol {
counter-reset: item;
}
/* 递增计数器 */
li::before {
counter-increment: item;
content: counters(item, " "); /* 使用空格作为分隔符 */
}
//在这个例子中，每当遇到一个<li>元素时，item计数器就会递增。counters(item, " ")函数会将所有嵌套级别的计数器值连接起来，并使用空格分隔它们。因此，对于一个三级嵌套的列表项，它的内容将类似于“1 2 3”。注意，为了使计数器工作，还需要使用counter-reset和counter-increment属性来初始化和递增计数器。同时，counter()和counters()函数通常与::before或::after伪元素一起使用，以便在元素的内容之前或之后插入计数器的值。
