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属性可以用来解决这一问题。请看下面的简单用法：

巴特西

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

最新文章

热门文章