CSS新特性（一）

一.CSS3模块：

1.CSS3 被划分为模块；

2.最重要的 CSS3 模块包括：

选择器、框模型、背景和边框、文本效果/2D/3D 转换/动画、多列布局、用户界面

二.CSS3边框：

1.能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框

2.边框属性：

border-radius

box-shadow

border-image

3.实例代码：

（1）圆角边框border-radius示例代码：

	div
	{
		border:2px solid;
		border-radius:25px;
		-moz-border-radius:25px; /* Old Firefox */
	}

（2） 边框阴影box-shadow示例代码：

	div
	{
		box-shadow: 10px 10px 5px #888888;
	}

（3） 边框图片border-image示例代码：

	div
	{
		border-image:url(border.png) 30 30 round;
		-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
		-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
		-o-border-image:url(border.png) 30 30 round; /* Opera */
	}

三.CSS3背景：

1.背景属性：

background-size、background-origin

2.background-size 属性：

background-size 属性规定背景图片的尺寸；

可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片

3.background-size实例代码：

	div
	{
		background:url(bg_flower.gif);
		-moz-background-size:63px 100px; /* 老版本的 Firefox */
		background-size:63px 100px;
		background-repeat:no-repeat;
	}

4.CSS3 background-origin 属性：

background-origin 属性规定背景图片的定位区域；

背景图片可以放置于 content-box、padding-box 或 border-box 区域

5.background-origin实例代码：

	div
	{
		background:url(bg_flower.gif);
		background-repeat:no-repeat;
		background-size:100% 100%;
		-webkit-background-origin:content-box; /* Safari */
		background-origin:content-box;
	}

6.多重背景图片：

CSS3 允许您为元素使用多个背景图像

为 body 元素设置两幅背景图片代码：

		body
		{ 
			background-image:url(bg_flower.gif),url(bg_flower_2.gif);
		}

7.background-clip：规定背景的绘制区域

四.CSS3 文本效果：

1.文本属性：

text-shadow、word-wrap

2.text-shadow：

text-shadow 可向文本应用阴影；

能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

3.text-shadow添加阴影示例代码：

	h1
	{
		text-shadow: 5px 5px 5px #FF0000;
	}

4.自动换行：

word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

5.word-wrap示例代码：

	p {word-wrap:break-word;}

6.hanging-punctuation：

规定标点字符是否位于线框之外。

7.punctuation-trim：

规定是否对标点字符进行修剪

8.text-align-last：

设置如何对齐最后一行或紧挨着强制换行符之前的行

9.text-emphasis：

向元素的文本应用重点标记以及重点标记的前景色

10.text-justify：

规定当 text-align 设置为 “justify” 时所使用的对齐方法

11.text-outline：

规定文本的轮廓

12.text-overflow：

规定当文本溢出包含元素时发生的事情

13.text-shadow：

向文本添加阴影

14.text-wrap：

规定文本的换行规则

15.word-break：

规定非中日韩文本的换行规则。

16.word-wrap：

允许对长的不可分割的单词进行分割并换行到下一行

五.CSS3 字体:

1.CSS3 @font-face 规则：

通过 CSS3，web 设计师可以使用他们喜欢的任意字体；

当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上

字体是在 CSS3 @font-face 规则中定义的

2.使用您需要的字体：

首先定义字体的名称（比如 myFirstFont），然后指向该字体文件

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

实例:

		<style> 
		@font-face
		{
			font-family: myFirstFont;
			src: url('Sansation_Light.ttf'),
			     url('Sansation_Light.eot'); /* IE9+ */
		}

		div
		{
			font-family:myFirstFont;
		}
		</style>

3.使用粗体字体：

必须为粗体文本添加另一个包含描述符的 @font-face：

实例：

		@font-face
		{
			font-family: myFirstFont;
			src: url('Sansation_Bold.ttf'),
			     url('Sansation_Bold.eot'); /* IE9+ */
			font-weight:bold;
		}

4.在 @font-face 规则中定义的所有字体描述符：

font-family：必需，规定字体的名称；

src：必需。定义字体文件的 URL

font-stretch：可选。定义如何拉伸字体。默认是 “normal”

font-style：可选。定义字体的样式。默认是 “normal”。

font-weight：可选。定义字体的粗细。默认是 “normal”

unicode-range：可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”