《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第十三章.pptVIP

图13-17综合实例的页面效果返回第13章使用CSS3进行样式增强13.1厂商前缀13.2浏览器的兼容性速览13.3为元素创建圆角13.4为文本添加阴影13.5为元素添加阴影13.6使用多重背景13.7使用渐变背景13.8设置元素的不透明度下一页返回第13章使用CSS3进行样式增强13.9使用Web字体13.10使用polyfill实现渐进增强13.11综合实例上一页返回13.1厂商前缀尚未完成的CSS实现是有可能发生变化的，为了应对这种情况，浏览器在实现一些CSS特性时使用了所谓的厂商前缀。这样，每个浏览器都可以引入自己的CSS属性支持方式，这种方式不会与最终的规范发生冲突，也不会与其他浏览器发生冲突。此外，厂商前缀还能确保将来规范成熟或定稿时，现有的使用实验性实现的网站不会崩溃。它们将被放置在CSS属性名的前面，例如在9.4.3节中介绍column-count属性时，写为-moz-column-cpunt和webkit-column-cpunt。不过要记住的是，不必每次都使用全部的前缀，在大多数情况下，只需要-moz-和-webkie-前缀。尽管对需要包含的有前缀属性的顺序没有要求，但应该总是在最后包含该属性的无前缀版本，以保证未来仍然可用。这样，即便浏览器未下一页返回13.1厂商前缀来支持无前缀的属性，也不会产生中断的情况。这样做意味着用较少的HTML，而用更多的CSS实现所需的效果。虽然厂商前缀通常会在CSS中造成大量的重复，但这只是前进道路上的一点点代价，同时也是Web专业人士已经普遍接受的代价，因为他们已经找到了将在代码中添加前缀这一繁琐工作自动化的方法。上一页返回13.2浏览器的兼容性速览这里给出了浏览器对本章将要介绍到的属性开始提供支持的版本，如图13-2所示。该图显示了浏览器第一次支持这些属性的版本，要获得更详细的分类，可以去以下网址查看返回13.3为元素创建圆角使用CSS3，可以在不引入额外的标记或图像的情况下，为大多数元素(包括表单元素、图像，甚至段落文本)创建圆角，如图13-3所示。1.短形式语法其格式为:border-radius当4个角的圆角半径相同时，例如都为20px，可以写为border-radius:20px;2.长形式语法其格式为:border-top-left-radius(左上角)border-top-right-radius(右上角)border-bottom-right-radius(右下角)下一页返回13.3为元素创建圆角border-bottom-left-radius(左下角)长形式语法分别设置4个角的圆角半径，常用于4个角的圆角半径不相同的情况。上一页返回13.4为文本添加阴影最早，text-shadow是CSS2规范的一部分，接着在CSS2.1中被移除了，后来在CSS3中又出现了。使用该元素，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果，如图13-4所示。文本阴影text一shadow属性接受4个值:带长度单位的x-offset(水平偏移量)、带长度单位的y-offset(垂直偏移量)、可选的带长度单位的blurradius(模糊半径)以及color(颜色)。阴影的颜色可以表示为十六进制数、RCB,RCBA或HSLA值(详见5.2.3节)。

在单个元素上可以添加一个阴影，也可以添加多个阴影。如图13-4所示，上面一行文字添加了1个阴影，而下面一行文字添加了2个阴影。返回13.5为元素添加阴影使用text-shadow属性可以为元素中的文本添加阴影，使用box-shadow属性则可以为元素本。身添加阴影，如图13-5所示。text-shadow和box-shad、的基础属性集是相同的，不过box-shadow还允许使用两个可选的属性——inset关键词属性(设置内阴影)和spread属性(用于扩张或收缩阴影)。尽管通常只对box一shadow属性使用4个值，实际上该属性接受6个值:带长度单位的x-offset和y-offset、可选的inset关键字、可选的带长度单位的blurradius和spread以及color。如果不指定blurradius和spread的值，则设为0。box-shadow属性与text-shadow属性的另一个区别是，前者获得的支持更少，且需要针对某些浏览器版本使用厂商前缀。返回13.6使用多重背景为单个HTML元素指定多个背景是CSS最令人期待的一个特性，如图13