CSS函数的8个小技巧

随着css语言的广泛使用和不断发展，现在css能做的功能更加多样，而且相信随着时间的推移，也将更加强大。css是前端开发必备的样式表语言，为提升开发效率，掌握一定的技巧必不可少，下面我们就一起来看看让程序猿代码开发效率飞起来的8个css函数小技巧吧。

1.纯CSS Tooltip
许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性，比如 data-tooltip="…" 。然后你就可以在你的CSS文件中添加以下的代码通过 attr() 函数来显示提示文字：

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

相当简单对吧？当然实际上我们还需要更多的代码来给提示增加样式，但是不用担心，已经有了为此设计的强大且纯粹的叫 Hint.css 的CSS库和 Balloon.css 。

2.使用自定义数据属性和 attr() 函数
我们已经学会如何使用 attr() 来创建提示，另外还有一些场景能使用到这个函数。通过与数据属性相结合，你可以通过很简单的一行HTML代码来创建带有标题和描述的缩略图：

现在你可以通过 attr() 函数来显示标题与描述：

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

以下为具体的例子：

注意：这个方法在浏览器支持方面可能会有一些问题，具体内容你可以查看 Accessibility support for CSS generated content 这篇文章。

3. CSS Counters
   你可以通过CSS Counters实现超棒的功能。这不是一个非常为人熟知的属性，大多数人甚至可能认为浏览器不能很好的支持这个属性，但事实上所有的浏览器都支持这个属性：

但是你不应该将CSS counters使用在有序列表

上，它更适合使用在类似分页或者图片库下面显示的数字上。你可以通过下面的例子看出如何使用很少的代码（甚至不使用JavaScript）来对选中的项目进行计数：

CSS counters也非常适合显示可通过拖放进行重新排序的项目列表上动态变化的数字：

正如最后一个例子，我们需要记住，通过该方法生成的内容在可访问性上可能会有些问题。

4.CSS滤镜实现的磨砂效果
在iOS7中，苹果实现了“磨砂玻璃”的效果--半透明的，模糊的元素，看起来像覆盖了一层磨砂玻璃。受到苹果的启发，这种效果被运用到很多地方。在CSS滤镜出现之前要重现这个效果还是有些棘手的。你必须通过使用 模糊图片 来实现这种毛玻璃的效果。但现在CSS

滤镜得到了几乎所有的主流浏览器的支持，所以要 重现这个效果 就简单很多了。

在未来，我们可以通过背景过滤器和 filter() 函数 来实现这样的效果，但目前只有 Safari 同时支持这两个功能。

有关于CSS的 filter 更多的介绍可以点击这里进行了解。

5.将HTML元素作为背景
一般我们可以设置一个JPEG或者PNG文件作为背景，或者也可以设置一个渐变的背景。但是你知道可以通过使用 element() 函数，从而将一个

设置为背景图片吗？现在， element() 函数只有在Firefox中得到了支持：

可能性是无止境的， 这里 是MDN上的一个例子。

有关于CSS的 element() 函数的相关介绍可以点击这里。

6.通过 calc() 创建更好的网格
流体网格虽然很棒但是仍然存在很严重的问题。比如，在顶部和底部的间距大小几乎不可能与在左边和右边的间距大小相同。另外，若使用的网格系统不一样，标记就会非常混乱。虽然弹性布局不是最终的解决方案，但是通过与 calc() （可以在CSS文件中作为一个属性

值）相结合，我们能够创建一个更好的网格。在 这里 ,George Martsoukos列举了很多例子，比如拥有完美间距的画廊网格。通过使用CSS预编译语言，比如Sass， 组建一个创造性的网格系统 可以非常简单且易于维护。同时浏览器对 calc() 的支持几乎完美，因此

calc() 绝对是你应该掌握的一个功能。

有关于CSS的 calc() 函数相关的介绍可以点击这里。

7. 通过 calc() 对齐 position:fixed 元素
   calc() 的另一个作用是用来对齐 position:fixed 的元素。比如，你有一个内容封装器，它左右都有流动的间距，你希望在这个内容封装器内精确对齐 position 为 fixed 的元素，但是这种情况下要计算出 left 和 right 属性的具体赋值就很困难。通过 calc() ,你

可以结合相对和绝对的值来精确定位你的元素：

.wrapper {
max-width: 1060px;
margin: 0 auto;
}
.floating-bubble {
position: fixed;
right: calc(50% - 530px); /* 50% - half your wrapper width */
}

比如：

有关于这方面的详细介绍可以阅读 @brnnbrn 写的《 Aligning position:fixed Elements with CSS calc 》一文。

8.使用 cubic-bezier() 实现动画
为了使一个网站或者APP的用户界面更具有吸引力，你可使用一些动画，但是可以选择的过渡效果的速度曲线是相当有限的，比如， linear 或者 ease-in-out 。而标准的速度曲线连弹力运动的效果都实现不了。通过使用 cubic-bezier() 函数，你可以精确实现你想要

的动画效果。

有两种方法使用 cubic-bezier() ——了解 背后的机制 后自己创建，或者是使用 cubic-bezier 生成器 。

说实话，我使用的是后者。

有关于 cubic-bezier() 详细的介绍可以点击这里。

总结
更加聪明的使用CSS函数不仅仅可以解决上面的问题比如创建一个更好的网格，它还可以给你更多的创作自由。随着浏览器支持越来越好，你可以使用CSS函数比如 calc() 来修改和提升一下你之前的CSS代码。最后，希望本文的分享能对大家有所帮助。

相关教程推荐：http://www.maiziedu.com/course/421/
文章来源：W3CPlus