CSS功能的8个巧妙技巧

CSS 的强大功能远超许多网页开发者想象。随着时间的推移，样式表语言的功能越来越强大，为浏览器带来了原本需要 JavaScript 才能实现的功能。本文将介绍八个巧妙的 CSS 函数技巧，这些技巧完全无需 JavaScript。

要点

• CSS 函数可用于创建各种效果和功能，例如工具提示、缩略图标题、计数器和磨砂玻璃效果，而无需 JavaScript。
• calc() 函数可用于创建更智能的网格系统和固定位置元素的对齐，从而在设计中提供更大的灵活性和精度。
• CSS 函数还允许使用 cubic-bezier() 函数进行创意动画，以及使用 element() 函数将 HTML 元素用作背景图像的潜力，尽管后者目前仅受 Firefox 支持。

1. 纯 CSS 工具提示

   许多网站仍然使用 JavaScript 创建工具提示，但实际上使用 CSS 更容易。最简单的解决方案是在 HTML 代码中使用数据属性提供工具提示文本，例如 data-tooltip="…"。有了这个标记，您可以将以下内容放入 CSS 中，以在 attr() 函数内显示工具提示文本：

   .tooltip::after {
     content: attr(data-tooltip);
   }

   非常简单明了，对吧？当然，还需要更多代码来实际设置工具提示的样式，但不用担心，有一个很棒的纯 CSS 库，专门用于此目的，名为 Hint.css。

2. (滥用)自定义数据属性和 attr() 函数

   我们已经将 attr() 用于工具提示，但它还有其他一些用例。结合数据属性，您可以仅使用一行 HTML 代码构建带有标题和说明的缩略图图像：

   <a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="...">
     <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
   </a>

   现在，您可以使用 attr() 函数显示标题和说明：

   .caption::after {
     content: attr(data-title);
     ...
   }

   这是一个带有悬停显示动画标题的缩略图的工作示例：[CodePen 示例链接](假设此处应插入 CodePen 链接)

   注意：生成的內容在无障碍方面可能存在问题。关于 CSS 生成内容的辅助功能支持的这篇文章对此主题进行了有用的解读。

3. CSS 计数器

   您可以使用 CSS 计数器，这似乎像是魔法。它不是最广为人知的特性，大多数人可能认为它支持得不是很好，但实际上，每个浏览器都支持 CSS 计数器：[Can I Use css-counters?](假设此处应插入 Can I Use 链接)

   虽然您不应将 CSS 计数器用于有序列表（<ol></ol>），但计数器非常适合分页或在图库中项目下方显示数字。您还可以计算选中项目的数量，考虑到您需要的代码很少（并且没有 JavaScript），这非常令人印象深刻：[CodePen 示例链接](假设此处应插入 CodePen 链接)。

   CSS 计数器也非常适合动态更改项目列表中的数字，这些数字可以通过拖放重新排序：[CodePen 示例链接](假设此处应插入 CodePen 链接)。

   与最后一个示例一样，请记住——生成的内容在无障碍方面可能存在问题。

4. 使用 CSS 过滤器实现磨砂玻璃效果

   随着 iOS 7 的发布，Apple 为我们带来了“磨砂玻璃”效果——半透明、模糊的元素，看起来像磨砂玻璃窗。受 Apple 实现的启发，这种效果开始出现在许多地方。在有 CSS 过滤器之前，重现这种效果有点棘手，您必须使用模糊图像来创建磨砂玻璃效果。现在，几乎所有主要浏览器都完全支持 CSS 过滤器，因此重现这种效果就容易得多。 [Can I Use css-filters?](假设此处应插入 Can I Use 链接)

   将来，我们可以使用 backdrop-filter 和 filter() 函数创建类似的效果，但这两个函数目前仅受 Safari 支持。

5. 使用 HTML 元素作为背景图像

   通常，您会指定 JPEG 或 PNG 文件作为背景图像，或者可能是渐变。但您是否知道，使用 element() 函数，您还可以使用 <div> 作为背景图像？目前，<code>element() 函数仅受 Firefox 支持：[Can I Use css-element-function?](假设此处应插入 Can I Use 链接)

   可能性几乎是无限的，这里有一个来自 MDN 的示例。

6. 使用 calc() 创建更智能的网格

   流体网格是一件很棒的事情，但存在一些严重的问题。例如，不可能让顶部和底部的间距与左侧和右侧的间距大小相同。此外，标记非常混乱，具体取决于您使用的网格系统。即使是 flexbox 本身也不是最终解决方案，但使用 calc() 函数（可以用作 CSS 中的值），网格可以变得更好。在本网站上的本教程中，George Martsoukos 展示了一些实际示例，例如具有完美间距的图库网格。使用 Sass 等 CSS 预处理器，构建有创意的网格系统可以非常简单易于维护。由于浏览器的支持也几乎完美，因此 calc() 是您绝对应该使用的便捷功能。 [Can I Use calc?](假设此处应插入 Can I Use 链接)

7. 使用 CSS calc() 对齐 position:fixed 元素

   calc() 函数的另一个用例是对齐具有固定位置的元素。例如，如果您有一个具有流体间距的左侧和右侧的内容包装器，并且您想精确地对齐该包装器内的固定元素——您将很难确定为“right”或“left”属性选择哪个值。使用 calc()，您可以组合相对值和绝对值以完美地对齐元素：

   .tooltip::after {
     content: attr(data-tooltip);
   }

   这是一个示例：[CodePen 示例链接](假设此处应插入 CodePen 链接)

8. 使用 cubic-bezier() 进行动画

   为了使网站或应用程序的 UI 更具吸引力，您可以使用动画，但标准的缓动选项非常有限。例如，“linear”或“ease-in-out”。像弹跳动画这样的东西，甚至使用标准选项也不可能实现。使用 cubic-bezier() 函数，您可以按照自己的意愿精确地设置元素动画。

   有两种方法可以使用 cubic-bezier()——理解其背后的数学原理并自己构建它，或者使用 cubic-bezier 生成器。

   老实说，我会选择后者。

结论

巧妙地使用 CSS 函数不仅可以解决已知问题（例如建立更智能的网格系统），还可以为您提供更大的创造自由。随着浏览器支持越来越好，您应该认真查看您的 CSS 并使用 calc() 等函数对其进行改进。

关于 CSS 函数的常见问题

作为初学者，我应该了解哪些基本的 CSS 函数？

CSS 函数用于设置 CSS 属性的值。每个初学者都应该了解的一些基本函数包括 rgb()、rgba()、hsl()、hsla() 和 calc()。rgb() 和 rgba() 函数用于定义颜色，而 hsl() 和 hsla() 函数用于根据色相、饱和度和亮度定义颜色。calc() 函数允许您执行计算以确定 CSS 属性值。

如何在 CSS 中使用 calc() 函数？

CSS 中的 calc() 函数用于执行可以用作属性值的计算。此函数可以使用“ ”（加法），“-”（减法），“*”（乘法）和“/”（除法）数学运算符。例如，您可以使用 calc() 创建一个始终为视口宽度 50% 减去 20 像素的 div，如下所示：div { width: calc(50% – 20px); }。

CSS 中 rgb() 和 rgba() 函数有什么区别？

CSS 中 rgb() 和 rgba() 函数的主要区别在于，rgba() 包含一个 alpha 通道，该通道指定颜色的不透明度。alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。例如，要设置半透明红色，您可以使用：color: rgba(255, 0, 0, 0.5);。

如何使用 CSS 函数创建渐变？

可以使用 CSS 函数使用 linear-gradient() 和 radial-gradient() 函数创建渐变。例如，要创建一个从红色到蓝色的线性渐变，您可以使用：background: linear-gradient(red, blue);。类似地，要创建一个从中心红色的径向渐变到边缘的蓝色，您可以使用：background: radial-gradient(red, blue);。

我可以使用 CSS 函数转换元素吗？

是的，CSS 函数可用于转换元素。transform 属性可与各种函数（如 rotate()、scale()、skew() 和 translate()）一起使用，以修改元素的外观。例如，要将元素旋转 45 度，您可以使用：transform: rotate(45deg);。

CSS 中 attr() 函数的用途是什么？

CSS 中的 attr() 函数用于返回所选元素的属性值。这对于生成内容等很有用。例如，您可以使用 attr() 在工具提示中显示链接的“href”属性的值：a:after { content: attr(href); }。

如何在 CSS 中使用 var() 函数？

CSS 中的 var() 函数用于插入自定义属性（也称为“CSS 变量”）的值。例如，您可以定义一个自定义属性 --main-color: blue;，然后在 CSS 中使用它，如下所示：color: var(--main-color);。

我可以使用 CSS 函数创建动画吗？

是的，CSS 函数可用于创建动画。CSS 中的 animation 属性是八个不同属性的简写属性，包括 animation-name、animation-duration、animation-timing-function 等。例如，要创建一个名为“slidein”的 2 秒动画，您可以使用：animation: slidein 2s;。

url() 函数在 CSS 中的用途是什么？

CSS 中的 url() 函数用于包含文件。url() 函数最常见的用途是链接到外部样式表或包含图像。例如，要设置元素的背景图像，您可以使用：background-image: url('image.jpg');。

我可以使用 CSS 函数创建 3D 变换吗？

是的，CSS 函数可用于创建 3D 变换。CSS 中的 transform 属性可与 rotateX()、rotateY()、rotateZ()、scale3d() 和 translate3d() 等函数一起使用以创建 3D 变换。例如，要围绕 X 轴旋转元素，您可以使用：transform: rotateX(45deg);。

请注意，我已尽力对原文进行伪原创，并保留了图片的原始格式和位置。 由于无法访问 CodePen 和 Can I Use 网站，我用占位符替换了相关的链接。请自行查找并插入正确的链接。