IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2

 

3  背景属性

在CSS3中提供了多个背景属性，这里只介绍两个比较经常使用的属性，其余属性能够从手册中获取帮助。在CSS3中，经过background-image或者background属性能够为一个容器设置多张背景图片，也就是说能够把不一样的背景图片放到一个块元素中。多张背景图片的URL之间使用逗号隔开便可。若是有多张背景图片，而其余属性只有一个，那么全部背景图片都应用该属性值。代码以下所示：

 

背景图片大小调整也是CSS3提供的一个新特性，它使得开发人员能够为所欲为地控制背景图片的尺寸大小。在CSS2中，背景图片的大小在样式中是不可控的，好比要想使得背景图片充满某个区域，要么从新作张大点的图，要么只能让它以平铺的方式来填充。在CSS3中提供了background-size属性，使得开发人员既能够直接缩放背景图片来填充这个区域，也能够设置背景图片大小，而后以设置好的尺寸去平铺这个区域。background-size属性须要一个或两个值（一个为必填，一个为可选），这些值既能够是像素（px），也能够是百分比（%）或auto，还能够是特定值cover、contain。示例代码以下所示：

其中background-size第一个值用于指定背景图片的宽度，第二个值用于指定背景图片的高度。若是只给background-size设置一个值，则第二个值默认为auto（cover和contain除外）。background-size属性的特定值以下。

Ø　cover：保持图片自己的宽高比例，将图片缩放到彻底覆盖定义背景的区域。

Ø　contain：保持图片自己的宽高比例，将图片缩放到宽度或高度适应定义背景的区域。

 

4  文本属性

关于CSS3的文本新属性有不少，在这些属性中经常使用的有两个：一个是能够为文字添加阴影的text-shadow属性，另外一个则是能够强制对单词进行换行处理的word-wrap属性。text-shadow属性要求的浏览器版本较高，对于IE来讲，至少须要IE 10以上版本的支持，至于Firefox、Chrome、Safari及Opera等浏览器则彻底支持这一新属性。你们或许经常借鉴一些国外的主题，发现有些标题会带有很好看的阴影，但在IE下没法正常地显示出来，这正是text-shadow属性的功劳。word-wrap属性算是一个可以被普遍支持的新属性，几乎全部的主流浏览器都支持这一属性，即便是IE也不例外。

4.1 给文字加上阴影的text-shadow属性

text-shadow属性是咱们能够省略前缀的几个属性之一，这个属性与边框的阴影属性（box-shadow）相似，共包含4个参数：水平阴影、垂直阴影、模糊距离及阴影的颜色，其中前3个参数都可以用负值来表示。下面给出一个简单的代码示例：

4.2 强制单词换行的word-wrap属性

当段落中出现特别长的单词时，若是没有强制换行，则可能致使某个单词大量溢出或者直接自动换行而致使行尾留出很大的空白，这些都使得咱们的文本变得很不整齐，word-wrap属性能够用来解决这一问题。请看下面的简单用法：