HTML5+CSS3网页设计实例教程-第10章-应用CSS3的属性.ppt

1、HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第第10章章 应用应用CSS3的属性的属性本章概述 本章的学习目标主要内容HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第2页本章概述本章概述l到目前为止，本书已经介绍了到目前为止，本书已经介绍了CSS基础、了解了基础、了解了新的选择器、应用了新的选择器、应用了Web字体，并且通览了字体，并且通览了Web文档的排版。现在，是时候应用更多的文档的排版。现在，是时候应用更多的CSS3属性属性，并将这些设计巧妙的属性添加到网站中去了。，并将这些设计巧妙的属性添加到网站中去了。l本章将介绍新的颜色模型、透明度以及背景属性

2、，本章将介绍新的颜色模型、透明度以及背景属性，此外还会展示如何应用多重背景、边框、阴影和渐此外还会展示如何应用多重背景、边框、阴影和渐变。变。HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第3页本章的学习目标本章的学习目标l了解如何在网页中设置颜色与透明度了解如何在网页中设置颜色与透明度l掌握背景裁剪、多重背景以及设置背景尺掌握背景裁剪、多重背景以及设置背景尺寸的选项寸的选项l如何不利用图片创建投影及圆角如何不利用图片创建投影及圆角l如何应用如何应用CSS3的属性为边框添加图像的属性为边框添加图像l了解了解CSS3的渐变功能的渐变功能HTML5+CSS3网页设计实例教程第10

3、章 应用CSS3的属性第4页主要内容主要内容10.1 颜色与透明度颜色与透明度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10.8 本章小结本章小结HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第5页10.1 颜色与透明度颜色与透明度l我们习惯在样式表中用关键字（我们习惯在样式表中用关键字（red或者或者blue）或者）或者十六进制值（十六进制值（#fff 或者或者#ffffff）来表示颜色值，）来表示颜色值，CSS3颜色模块引入了两种写入颜

4、色值的新方式：颜色模块引入了两种写入颜色值的新方式：RGBa和和HSLa，在决定使用哪一种方式之前，首先，在决定使用哪一种方式之前，首先介绍介绍RGB和和HSL之间的区别。之间的区别。HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性RGBlRGB描述了一种红、绿、蓝颜色模型，在描述了一种红、绿、蓝颜色模型，在这个模型中创建颜色时使用三个数值表示这个模型中创建颜色时使用三个数值表示一种颜色。一种颜色。RGB是一种加性颜色模型，就是一种加性颜色模型，就是说一种颜色是由三原色相加得到，也即是说一种颜色是由三原色相加得到，也即用这三个值进行十六进制乘法运算，区别用这三个值进行十六进制乘

5、法运算，区别仅在于颜色值表示的方式不同。仅在于颜色值表示的方式不同。RGB用用0-255之间的数表示颜色值。之间的数表示颜色值。第6页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性RGBa透明度透明度l通过给颜色属性添加第四个值，就可以控通过给颜色属性添加第四个值，就可以控制透明度。制透明度。RGBa中的第四个值中的第四个值“a”表示表示alpha，它的作用和在，它的作用和在Photoshop中修改中修改alpha通道相同。通道相同。第7页起作用的RGBa透明度HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性HSLal用用CSS3添加颜色的另添加颜色的另一种方

6、法是使用一种方法是使用HSLa（色度、饱和度、亮度（色度、饱和度、亮度和和alpha），），HSL比比RGB更加直观，可以更加直观，可以想象一个色轮来猜测初想象一个色轮来猜测初始颜色，然后调整饱和始颜色，然后调整饱和度值和亮度值直到找到度值和亮度值直到找到所需的颜色明暗度。所需的颜色明暗度。第8页 红色 品红色 蓝色 蓝绿色 绿色 黄色 HSLa色轮HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性不透明度不透明度lalpha透明度并不是创建透明元素的唯一方透明度并不是创建透明元素的唯一方法，另一种方法是使用法，另一种方法是使用opacity属性。它与属性。它与RGBa或或HSL

7、a中的中的alpha通道的工作方式通道的工作方式类似，该属性接受类似，该属性接受0到到1之间的值之间的值不同不同之处在于该属性只能接受这一个值，这意之处在于该属性只能接受这一个值，这意味着仍然需要用其他属性味着仍然需要用其他属性(比如比如background-color或或color)来声明颜色。来声明颜色。为了将为了将article元素的背景设为元素的背景设为50%不透明不透明，可以这样做：，可以这样做：第9页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第10页主要内容主要内容10.1 颜色与透明度颜色与透明度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影

8、10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10.8 本章小结本章小结HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性10.2 背景背景lCSS3最有趣并且具有许多不同实现的模块最有趣并且具有许多不同实现的模块之一就是之一就是Background and Borders模块模块，现在它是一个候选的推荐模块。在本章，现在它是一个候选的推荐模块。在本章稍后我们将回过头来介绍边框，现在先介稍后我们将回过头来介绍边框，现在先介绍背景裁剪、多重背景以及设置背景尺寸绍背景裁剪、多重背景以及设置背景尺寸的选项。的选项。

9、第11页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性background-clip属性属性l我们已经习惯于看到背景会在其边框内进我们已经习惯于看到背景会在其边框内进行拉伸，而行拉伸，而Background and Borders模模块中引入的块中引入的background-clip属性可以指定属性可以指定背景是否要在其边框内进行拉伸。背景是否要在其边框内进行拉伸。第12页具有content-box值的应用效果背景图像在元素的边框内拉伸HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性background-origin属性属性lbackground-origin

10、属性允许我们为给定的属性允许我们为给定的元素指定其背景位置的起始点，它能接受元素指定其背景位置的起始点，它能接受的值与的值与background-clip属性相同。属性相同。第13页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性background-size属性属性lbackground-size属性可被用来简化自互属性可被用来简化自互联网出现之日开始网页设计师就全力解决联网出现之日开始网页设计师就全力解决的问题之一，这个问题是指：不管浏览器的问题之一，这个问题是指：不管浏览器窗口大小或者屏幕分辨率，不依赖于窗口大小或者屏幕分辨率，不依赖于Flash或或JavaScript就

11、能获得实际大小的背景图就能获得实际大小的背景图像。解决该问题的方案：像。解决该问题的方案：background-size属性。属性。第14页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性多重背景多重背景lCSS3的的Backgrounds and Borders模块模块中囊括了为单个元素添加多重背景的能力中囊括了为单个元素添加多重背景的能力。下面将展示使用。下面将展示使用background-image的的例子。例子。第15页三幅背景图像应用到body元素上HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第16页主要内容主要内容10.1 颜色与透明度颜色与透明

12、度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10.8 本章小结本章小结HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性10.3 边框边框l现在，可以不再通过添加额外的标记或者现在，可以不再通过添加额外的标记或者剪切外部图像来创建一些微不足道的细节剪切外部图像来创建一些微不足道的细节，比如创建一个圆角，从而使得设计更有，比如创建一个圆角，从而使得设计更有吸引力。吸引力。border-radius只是利用了只是利用了CSS的的功能就可以提供添加自

13、然圆角的能力。同功能就可以提供添加自然圆角的能力。同时，时，Backgrounds and Borders模块还具模块还具有为边框添加图像的能力。有为边框添加图像的能力。第17页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性border-radius属性属性l只要写几行很短的只要写几行很短的CSS代码就可以为任意代码就可以为任意元素添加圆角。简写形式的元素添加圆角。简写形式的border-radius属性可以实现这项功能，此外还可以为每属性可以实现这项功能，此外还可以为每个角单独设置诸如个角单独设置诸如border-top-left-radius之类的属性。之类的属性。l要知

14、道半径是圆的直径的一半，所以，只要知道半径是圆的直径的一半，所以，只需要通过为元素的每个角设置唯一的值，需要通过为元素的每个角设置唯一的值，就可以将这些角变为相同的圆角。就可以将这些角变为相同的圆角。第18页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性border-image属性属性lborder-image边框图像允许指定一幅图像边框图像允许指定一幅图像作为元素的边框。作为元素的边框。l边框图像可以由单幅图像创建，该图像可边框图像可以由单幅图像创建，该图像可以在元素周边的边框中沿着不同的轴向进以在元素周边的边框中沿着不同的轴向进行裁切或拉伸，换句话说，图像被行裁切或拉伸，

15、换句话说，图像被4条线划条线划分分(或切分或切分)成成9个切片。个切片。第19页Opera中应用的边框图像HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第20页主要内容主要内容10.1 颜色与透明度颜色与透明度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10.8 本章小结本章小结HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性10.4 下拉阴影下拉阴影l下拉阴影，与圆角和渐变一样，向盒添加下拉阴影，与圆角和渐变一样，向盒添加阴

16、影曾经是噩梦般的经历，有了阴影曾经是噩梦般的经历，有了CSS3的的Backgrounds and Borders模块之后，情模块之后，情况就不再是这样了。况就不再是这样了。第21页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性box-shadow属性属性l向元素添加向元素添加box-shadow十分简单，该属性十分简单，该属性可以接受可以接受6个值：水平偏移个值：水平偏移(X)、垂直偏移、垂直偏移(Y)、模糊、伸展距离、颜色以及一个可选、模糊、伸展距离、颜色以及一个可选关键字关键字inset，该关键字将外阴影转换成内，该关键字将外阴影转换成内阴影。阴影。第22页没有厂商前缀的

17、box-shadow的效果HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性text-shadow属性属性ltext-shadow属性与属性与box-shadow属性惊人属性惊人地相似。可以用相同的标记地相似。可以用相同的标记box-shadow将将一个或者几个阴影应用于文本，即水平偏一个或者几个阴影应用于文本，即水平偏移、垂直偏移、模糊以及颜色。注意移、垂直偏移、模糊以及颜色。注意text-shadow不接受伸展值或关键字不接受伸展值或关键字inset。第23页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第24页主要内容主要内容10.1 颜色与透明度颜色与透

18、明度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10.8 本章小结本章小结HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第25页10.5 渐变渐变l用用CSS3的能力创建特效的关键部分：渐变。的能力创建特效的关键部分：渐变。lCSS的渐变位于的渐变位于CSS的的Image Values and Replaced Content模块中。模块中。l线性渐变线性渐变l放射渐变放射渐变l平铺渐变平铺渐变HTML5+CSS3网页设计实例教程第10章 应

19、用CSS3的属性第26页主要内容主要内容10.1 颜色与透明度颜色与透明度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10.8 本章小结本章小结HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器第27页l总的来说，总的来说，Safari、Chrome、Firefox、Opera以及以及Internet Explorer 9和和10对于本对于本章所介绍的属性具有较好的支持，但是对章所介绍的属

20、性具有较好的支持，但是对于于Internet Explorer 6-8浏览器有下面三种浏览器有下面三种选择。选择。在在CSS代码中添加备选，以保证低性能浏览器可以适当地理解属代码中添加备选，以保证低性能浏览器可以适当地理解属性。性。运行运行Modernizr之类检测脚本，并相应地组织样式表。之类检测脚本，并相应地组织样式表。用用JavaScript库弥补支持需求的差距。库弥补支持需求的差距。HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性使用使用ModernizrlModernizr(http:/j.mp/modernizr)与与CSS3属性之间有如下关系。属性之间有如下关系。

21、l当用户访问网站时，当用户访问网站时，Modernizr会运行并检会运行并检测用户浏览器内部对测用户浏览器内部对CSS3和和HTML5的支的支持，同时会给持，同时会给html元素增加一系列的类。元素增加一系列的类。例如，例如，Modernizr会给会给Internet Explorer增增加类加类no-cssgradients。这意味着可以在一。这意味着可以在一个样式表中拥有两套规则来迎合两种浏览个样式表中拥有两套规则来迎合两种浏览器。器。第28页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性CSS3 Piel没有使用没有使用CSS3 Pie的规则如下所示：的规则如下所示：l

22、为了在为了在IE 6、7和和8中增加这种支持，只要中增加这种支持，只要添加添加CSS3 Pie behavior:url(js/PIE.htc)即即可，这样就可以在可，这样就可以在Internet Explorer中得中得到圆角。到圆角。第29页HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第30页主要内容主要内容10.1 颜色与透明度颜色与透明度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10.8 本章小结本章小结HTML5+CSS3网页设

23、计实例教程第10章 应用CSS3的属性10.7 组合组合CSS3效果实例效果实例l在本章前面介绍了许多在在本章前面介绍了许多在CSS3中可用的新中可用的新属性，下面用这些属性来设计一个看起来属性，下面用这些属性来设计一个看起来很可爱的按钮。很可爱的按钮。第31页处于正常和:hover状态的按钮HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性第32页主要内容主要内容10.1 颜色与透明度颜色与透明度10.2 背景背景10.3 边框边框10.4 下拉阴影下拉阴影10.5 渐变渐变10.6 检测支持和辅助其他浏览器检测支持和辅助其他浏览器10.7 组合组合CSS3效果实例效果实例10

24、.8 本章小结本章小结HTML5+CSS3网页设计实例教程第10章 应用CSS3的属性10.8 本章小结本章小结l环顾互联网，人们应用本章所述的技术创环顾互联网，人们应用本章所述的技术创建了众多实例，包括大量的只用到了建了众多实例，包括大量的只用到了CSS的图标、形状、按钮、背景和徽标，其中的图标、形状、按钮、背景和徽标，其中一些用到了语义一些用到了语义HTML，其他的用到了大量，其他的用到了大量额外的额外的div或或span标记来获得本应是图像的标记来获得本应是图像的效果。如果正在阅读本书，就会对此有更效果。如果正在阅读本书，就会对此有更深刻的理解。要巧妙地使用深刻的理解。要巧妙地使用CSS3属性以及属性以及何时使用才是合适的。何时使用才是合适的。第33页