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

1、第10章 应用CSS3的属性本章概述 本章的学习目标主要内容第2页本章概述到目前为止，本书已经介绍了CSS基础、了解了新的选择器、应用了Web字体，并且通览了Web文档的排版。现在，是时候应用更多的CSS3属性，并将这些设计巧妙的属性添加到网站中去了。本章将介绍新的颜色模型、透明度以及背景属性，此外还会展示如何应用多重背景、边框、阴影和渐变。第3页本章的学习目标了解如何在网页中设置颜色与透明度掌握背景裁剪、多重背景以及设置背景尺寸的选项如何不利用图片创建投影及圆角如何应用CSS3的属性为边框添加图像了解CSS3的渐变功能第4页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4

2、下拉阴影10.5 渐变10.6 检测支持和辅助其他浏览器10.7 组合CSS3效果实例10.8 本章小结第5页10.1 颜色与透明度我们习惯在样式表中用关键字（red或者blue）或者十六进制值（#fff 或者 #ffffff）来表示颜色值，CSS3颜色模块引入了两种写入颜色值的新方式：RGBa和HSLa，在决定使用哪一种方式之前，首先介绍RGB和HSL之间的区别。RGBRGB描述了一种红、绿、蓝颜色模型，在这个模型中创建颜色时使用三个数值表示一种颜色。RGB是一种加性颜色模型，就是说一种颜色是由三原色相加得到，也即用这三个值进行十六进制乘法运算，区别仅在于颜色值表示的方式不同。RGB用0-2

3、55之间的数表示颜色值。第6页RGBa透明度通过给颜色属性添加第四个值，就可以控制透明度。RGBa中的第四个值“a”表示alpha，它的作用和在Photoshop中修改alpha通道相同。第7页起作用的RGBa透明度HSLa用CSS3添加颜色的另一种方法是使用HSLa（色度、饱和度、亮度和alpha），HSL比RGB更加直观，可以想象一个色轮来猜测初始颜色，然后调整饱和度值和亮度值直到找到所需的颜色明暗度。第8页HSLa色轮不透明度alpha透明度并不是创建透明元素的唯一方法，另一种方法是使用opacity属性。它与RGBa或HSLa中的alpha通道的工作方式类似，该属性接受0到1之间的值不

4、同之处在于该属性只能接受这一个值，这意味着仍然需要用其他属性(比如background-color或color)来声明颜色。为了将article元素的背景设为50%不透明，可以这样做：第9页第10页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4 下拉阴影10.5 渐变10.6 检测支持和辅助其他浏览器10.7 组合CSS3效果实例10.8 本章小结10.2 背景CSS3最有趣并且具有许多不同实现的模块之一就是Background and Borders模块，现在它是一个候选的推荐模块。在本章稍后我们将回过头来介绍边框，现在先介绍背景裁剪、多重背景以及设置背景尺寸的选项。第1

5、1页background-clip属性我们已经习惯于看到背景会在其边框内进行拉伸，而Background and Borders模块中引入的background-clip属性可以指定背景是否要在其边框内进行拉伸。第12页具有content-box值的应用效果背景图像在元素的边框内拉伸background-origin属性background-origin属性允许我们为给定的元素指定其背景位置的起始点，它能接受的值与background-clip属性相同。第13页background-size属性background-size属性可被用来简化自互联网出现之日开始网页设计师就全力解决的问题之一，这

6、个问题是指：不管浏览器窗口大小或者屏幕分辨率，不依赖于Flash或JavaScript就能获得实际大小的背景图像。解决该问题的方案：background-size属性。第14页多重背景CSS3的Backgrounds and Borders模块中囊括了为单个元素添加多重背景的能力。下面将展示使用background-image的例子。第15页三幅背景图像应用到body元素上第16页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4 下拉阴影10.5 渐变10.6 检测支持和辅助其他浏览器10.7 组合CSS3效果实例10.8 本章小结10.3 边框现在，可以不再通过添加额外的标

7、记或者剪切外部图像来创建一些微不足道的细节，比如创建一个圆角，从而使得设计更有吸引力。border-radius只是利用了CSS的功能就可以提供添加自然圆角的能力。同时，Backgrounds and Borders模块还具有为边框添加图像的能力。第17页border-radius属性只要写几行很短的CSS代码就可以为任意元素添加圆角。简写形式的border-radius属性可以实现这项功能，此外还可以为每个角单独设置诸如border-top-left-radius之类的属性。要知道半径是圆的直径的一半，所以，只需要通过为元素的每个角设置唯一的值，就可以将这些角变为相同的圆角。第18页bord

8、er-image属性border-image边框图像允许指定一幅图像作为元素的边框。边框图像可以由单幅图像创建，该图像可以在元素周边的边框中沿着不同的轴向进行裁切或拉伸，换句话说，图像被4条线划分(或切分)成9个切片。第19页Opera中应用的边框图像第20页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4 下拉阴影10.5 渐变10.6 检测支持和辅助其他浏览器10.7 组合CSS3效果实例10.8 本章小结10.4 下拉阴影下拉阴影，与圆角和渐变一样，向盒添加阴影曾经是噩梦般的经历，有了CSS3的Backgrounds and Borders模块之后，情况就不再是这样了。

9、第21页box-shadow属性向元素添加box-shadow十分简单，该属性可以接受6个值：水平偏移(X)、垂直偏移(Y)、模糊、伸展距离、颜色以及一个可选关键字inset，该关键字将外阴影转换成内阴影。第22页没有厂商前缀的box-shadow的效果text-shadow属性text-shadow属性与box-shadow属性惊人地相似。可以用相同的标记box-shadow将一个或者几个阴影应用于文本，即水平偏移、垂直偏移、模糊以及颜色。注意text-shadow不接受伸展值或关键字inset。第23页第24页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4 下拉阴影10

10、.5 渐变10.6 检测支持和辅助其他浏览器10.7 组合CSS3效果实例10.8 本章小结第25页10.5 渐变用CSS3的能力创建特效的关键部分：渐变。CSS的渐变位于CSS的Image Values and Replaced Content模块中。线性渐变放射渐变平铺渐变第26页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4 下拉阴影10.5 渐变10.6 检测支持和辅助其他浏览器10.7 组合CSS3效果实例10.8 本章小结10.6 检测支持和辅助其他浏览器第27页总的来说，Safari、Chrome、Firefox、Opera以及Internet Explore

11、r 9和10对于本章所介绍的属性具有较好的支持，但是对于Internet Explorer 6-8浏览器有下面三种选择。在CSS代码中添加备选，以保证低性能浏览器可以适当地理解属性。运行Modernizr之类检测脚本，并相应地组织样式表。用JavaScript库弥补支持需求的差距。使用ModernizrModernizr(http:/j.mp/modernizr)与CSS3属性之间有如下关系。当用户访问网站时，Modernizr会运行并检测用户浏览器内部对CSS3和HTML5的支持，同时会给html元素增加一系列的类。例如，Modernizr会给Internet Explorer增加类no-c

12、ssgradients。这意味着可以在一个样式表中拥有两套规则来迎合两种浏览器。第28页CSS3 Pie没有使用CSS3 Pie的规则如下所示：为了在IE 6、7和8中增加这种支持，只要添加CSS3 Pie behavior: url(js/PIE.htc)即可，这样就可以在Internet Explorer中得到圆角。第29页第30页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4 下拉阴影10.5 渐变10.6 检测支持和辅助其他浏览器10.7 组合CSS3效果实例10.8 本章小结10.7 组合CSS3效果实例在本章前面介绍了许多在CSS3中可用的新属性，下面用这些属性来设计一个看起来很可爱的按钮。第31页处于正常和:hover状态的按钮第32页主要内容10.1 颜色与透明度10.2 背景10.3 边框10.4 下拉阴影10.5 渐变10.6