通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框
border-radius：创建圆角边框 box-shadow 添加阴影 border-image 使用图片来绘制边框
div
{
border-radius:25px;
}
div
{
box-shadow: 10px 10px 5px #888888;
}
div
{
border-image:url(border.png) 30 30 round;
}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>
2 CSS3 背景
属性 描述 CSS
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。(放置于 content-box、padding-box 或 border-box)
background-size 规定背景图片的尺寸。
3 CSS3 文本效果 CSS3 包含多个新的文本特性。
3.1 text-shadow 文本应用阴影
选项依次是水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
h1 { text-shadow: 5px 5px 5px #FF0000; }
3.2 word-wrap 属性允许您允许文本强制文本进行换行 即使这意味着会对单词进行拆分：
<!DOCTYPE html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
3.4 @font-face 规则(引用 http://www.w3school.com.cn/css3/css3_font.asp)
定义指定的字体
4 CSS3 转换 ，可以使用 2D 或 3D 转换来转换您的元素。（引用http://www.w3school.com.cn/css3/css3_2dtransform.asp）
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
4.1 translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
4.2 rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div
{
transform: rotate(30deg); //旋转30度 允许负值，元素将逆时针旋转。
}
4.3 scale()
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
div
{
transform: scale(2,4);
}
4.4 skew()
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>
5 CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s; //应用于g高 宽度属性的过渡效果，时长为 2 秒
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);//旋转180度
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
6 CSS3 多列 (引用http://www.w3school.com.cn/css3/css3_multiple_columns.asp)
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
column-count ：column-count 属性规定元素应该被分隔的列数：
column-gap：column-gap 属性规定列之间的间隔
column-rule：column-rule 属性设置列之间的宽度、样式和颜色规则。