认识达内从这里开始

现在做网页已经很少用dw了，而大部分人使用的是html5代码编写网页，采用css样式表对网页进行布局，但是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);

...

}

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上的一个例子。

6.通过 calc() 创建更好的网格

流体网格虽然很棒但是仍然存在很严重的问题。比如，在顶部和底部的间距大小几乎不可能与在左边和右边的间距大小相同。另外，若使用的网格系统不一样，标记就会非常混乱。虽然弹性布局不是最终的解决方案，但是通过与 calc() (可以在CSS文件中作为一个属性值)相结合，我们能够创建一个更好的网格。在 这里 ,George Martsoukos列举了很多例子，比如拥有完美间距的画廊网格。通过使用CSS预编译语言，比如Sass， 组建一个创造性的网格系统 可以非常简单且易于维护。同时浏览器对 calc() 的支持几乎完美，因此 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 */

}

8.使用 cubic-bezier() 实现动画

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

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

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

达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择太原达内培训，不再孤军奋战，轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。