从零开始学 Web之CSS3（四）边框图片，过渡

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、边框图片

边框图片：就是给边框加图片背景。

我们之前加的边框都是纯颜色的边框，那么我们怎么给边框加图片呢？

原理：把一张图片分成九宫格的形式，然后一一对应到需要添加边框的元素上。

并且，添加边框图片是以背景的方式添加的，所以会有可能文字覆盖在边框的情况，后面也会介绍处理方法。

语法：

以上的内容可以连写（注意有的属性需要用 / 分隔）：

案例：QQ气泡

我们在发QQ消息的时候，可以选择很多不同的气泡样式，而且当我们发消息的时候，不管文字的多少，气泡边框的样式不变，而只是中间内容的填充。如果只是简单的气泡拉伸的话，边角就会变得丑陋，所以就需要用到边框图片的技术。

二、过渡

通过过渡 ,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

要实现这一点，必须规定两项内容：

1.规定希望把效果添加到哪个 CSS 属性上；

2.规定效果的时长。

1、基本语法

注意：添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态。

2、连写样式

参数说明：

：属性名称

：过渡时间

：时间函数

：延迟时间

为多个样式同时添加过渡效果：（之间用逗号隔开）

为所有样式添加过渡效果：：所有样式

缺点：

所有样式的过渡效果一样。

效率低下，它会去查询所有添加的样式。

建议不要这么写。

3、使用建议

因为 transition 最早是有由 webkit 内核浏览器提出来的，mozilla 和 opera 都是最近版本才支持这个属性，而我们的大众型浏览器 IE 全家都是不支持。另外由于各大现代浏览器 Firefox,Safari,Chrome,Opera 都还不支持 W3C的标准写法，所以在应用 transition 时我们有必要加上各自的前缀，最好在最后写上我们 W3C 的标准写法，这样支持标准写法的浏览器会覆盖前面的写法，只要浏览器支持我们的 transition 属性，那么这种效果就会自动加上去，如：

4、案例：手风琴效果

效果：鼠标放在每个标签上，会慢慢下拉出详细内容。

欢迎关注

Web前端之巅

念念不忘，必有回响。