学习
实践
活动
专区
工具
TVP
写文章

从零开始学 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前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180802G1P7UO00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券