1.CSS3边框
通过CSS3，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件。例如：border-radius、box-shadow、border-image
（1）CSS3圆角边框
在CSS2中添加圆角矩形需要技巧。必须为每个圆角使用不同的图片。在CSS3中，创建圆角是非常容易的。border-radius属性用于创建圆角：
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
（2）CSS3边框阴影
在CSS3中，box-shadow用于向方框添加阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
（3）CSS3边框图片
通过CSS3的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 */
}
新的边框属性
属性 描述 CSS
border-image 设置所有 border-image-* 属性的简写属性。 3
border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影。 3
2.CSS3背景
（1）CSS3 background-size 属性
background-size属性规定背景图片的尺寸。在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，允许在不同的环境中重复使用背景图片。能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
①调整背景图片的大小：
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
②对背景图片进行拉伸，使其完成填充内容区域：
div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}
（2）CSS3 background-origin属性
background-origin属性规定背景图片的定位区域。背景图片可以放置于content-box、padding-box 或border-box 区域。
①在content-box中定位背景图片：
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
②CSS3允许您为元素使用多个背景图像。为body元素设置两幅背景图片：
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
新的背景属性
属性 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。3
background-size 规定背景图片的尺寸。 3
3.CSS3文本效果
（1）CSS3文本阴影
在CSS3中，text-shadow 可向文本应用阴影。可以批定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
（2）CSS3自动换行
单词太长的话就可能超出某个区域，在CSS3中，word-wrap属性可以强制对文本进行换行 - 这意味着会对单词进行拆分：
p {word-wrap:break-word;}
（3）新的文本属性
属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当text-align设置为"justify"时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
4.CSS3字体
（1）CSS3 @font-face规则
在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。“自己的”的字体是在 CSS3 @font-face 规则中定义的。
（2）使用需要的字体
①在新的@font-face规则中，必须首先定义字体的名称（比如 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：
<style>
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf')
,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
（4）CSS3字体描述符
下面的表格列出了能够在@font-face 规则中定义的所有字体描述符：
