本文翻译自CSS3.info，并稍加改动，原文地址：Multiple backgrounds with CSS3。

CSS3允许在一个元素上放置多个背景。怎么做呢？你需要用半角逗号隔开多个背景，像这样：

background:{
	url(bady-top.gif) top left no-repeat,
	url(banner_fresco.jpg) top 11px no-repeat,
	url(bady-bottom.gif) bottom left no-repeat,
	url(body-midedle.gif) left repeat-y;
}

根据上面代码，写下了一个例子（PS：它只用了一个div哦！）：

本文翻译自CSS3.info，并稍加改动，原文地址：Background-size。

CSS3提供了一个属性使你可以定义背景图片的大小——background-size。

你可以用像数或百分比来定义元素的长和宽。但是注意当你用百分比指定一个元素的大小的时候，你需要用到background-orgin。

目前除IE外，background-size支持其它大部分主流浏览器。当然，他们需要加上各自的前缀：
Firefox：-moz-background-size;
Webkit内核(Chrome和Safari)：-webkit-background-size；
Opera：-o-background-size；
Konqueror：-khtml-ground-size。

例：

背景图片的长和宽分别为200px和50px。
所以你看到的背景图片应该非常小，并显示在这个元素的左上角。

代码如下：

p{
	background:url(http://jayuh.com/wp-content/uploads/2010/10/background1.jpg) no-repeat scroll 0% 0% transparent;
	padding:60px 5px 5px; border:1px solid rgb(153,0,0);
	color:rgb(131,209,62);
	-moz-background-size:200px 50px;
	-webkit-background-size:200px 50px;
	-o-background-size:200px 50px;
	-khtml-background-size:200px 50px;
}

background-clip属性和background-origin一样，都是用于背景定位的。不同的是background-origin定位的是背景图片，而background-clip定位的是背景颜色。

background-clip属性有两个取值，分别是：border-box和padding-box。当取值border-box的时候，背景颜色的定位开始于border的左上角；当取值padding-box的时候，背景颜色的定位开始于padding的左上角。

和background-orgin一样，除IE以外，background-clip支持目前大部分的主流浏览器。同样，他们还是要加上各自私有的前缀。

看下面两个例子，它们的background-orgin取值为content-box，background-clip取值分别为border-box和padding-box：

背景颜色（灰色）开始于border。

背景颜色（灰色）开始于padding。

第一个例子的代码：

.p{
	width:150px;
	height:100px;
	padding:10px;
	border:10px dashed #cad5eb;
	background:#f0f3f9 url(http://jayuh.com/wp-content/uploads/2010/10/background.jpg) no-	repeat;
	-moz-background-origin:content;
	-webkit-background-origin:content;
	-moz-background-clip:border;
	-webkit-background-clip:border;
	text-shadow:1px 1px #ccc
	color:black;
}

PS:本文例子不支持RSS，因为RSS把CSS忽略了。如想看本文的例子，请打开原文地址。

background-origin属性是用来确定背景图片在box中的定位。

backgorund-orgin属性有三个取值，分别是：border-box，padding-box和content-box。当取值border-box的时候，背景图片的定位开始于border的左上角；当取值padding-box的时候，背景图片的定位开始于padding的左上角；同理当取值content-box的时候，背景图片的定位开始于content的左上角。

目前支持的浏览器有Firefox、Chrome、Opera和Safari，也就是说除了IE，其它主流浏览器都支持了。不过它们大多数也都需加自己的前缀，比如Firefox需加前缀 -moz-，Webkit内核浏览器需加前缀 -webkit-，Opera需加前缀 -o-。

下面三个例子分别是取值为border-box、padding-box和content-box：

背景图片的起始位置开始于border

背景图片的起始位置开始于padding

背景图片的起始位置开始于content

下面是第一个例子的代码：

.p{
	width:150px;
	height:100px;
	padding:10px;
	border:10px dashed #cad5eb;
	background:#f0f3f9 url(http://jayuh.com/wp-content/uploads/2010/10/background.jpg) no-repeat;
	-moz-background-origin:border;
	-webkit-background-origin:border;
	background-origin:border;
	text-shadow:1px 1px white;
}

本文例子不支持RSS订阅，因为RSS把CSS忽略了。如想看本文的例子，请打开原文地址。

我正在学习CSS3，每天学一个属性，所以每天写一篇文章，以方便自己记忆与回顾。文章如果对大家有所帮助，算是一个意外的惊喜吧。文章大部分翻译于一些英文文章，还有一部份是我同拼西凑凑起来的。目前该“劣质教程”还在进行中，欢迎大家拍砖与纠错！

这里算是一个目录章节，方便查找和学习。

Borders
border-color
border-image
border-radius
box-shadow

Backgrounds
background-origin
background-clip
background-size
Multiple backgrounds

Color
HSL colors
HSLA colors
opacity
RGBA colors

Text effects
text-shadow
text-overflow
word-wrap

User-interface
box-sizing
resize
outline
nav-top,nav-right,nav-bottom,nav-left

Selectors
attribute selectors

Basic box model
overflow-x,overflow-y

Generated Content
content

Other modules
media queries
multi-column layout
Web fonts
speech

本文翻译自CSS3.info，并稍加改动，原文地址：Border-image: using images for your border。

CSS3中，另一个令人兴奋的属性是border-image。运用这个属性，你可以使用图片定义一个元素的边框。该元素由以下几个元素组成：border-image和border-corner-image。这两个元素简写为：

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image目前支持的浏览器有Firefox 3.5+、Chrome、Safari。Firefox需加前缀-moz，-Webkit内核浏览器加前缀-webkit。

例1：

border-image:url(border.png) 27 27 27 27 round round;

结果如下：

将border-image下的背景图片拉伸。

例２：

border-image: url(border.png) 27 27 27 27 stretch stretch;

结果如下：

将border-image下的背景图片平铺。

如果不幸您的浏览器不支持border-image属性，下面是显示效果的截图：

第一个例子：

第二个例子：