css3被划分为模块，其中重要的模块有：
1.选择器
2.框模型
3.背景和边框
4.文本效果
5.2D/3D转换
6.动画
7.多列布局
8.用户界面
CSS3边框
1.border-radius
用来实现边框的圆角效果。
基本语法：border-radius: 1-4 length|% / 1-4 length|%;
其中：lenght定义圆角形状；%是以百分比定义圆角的形状。
关于border-radius取值的例子：
border-radius:2em;等价于
border-top-left-radius:2em;
  border-top-right-radius:2em;
 border-bottom-right-radius:2em;
 border-bottom-left-radius:2em;
border-radius: 2em 1em 4em / 0.5em 3em;等价于
 border-top-left-radius: 2em 0.5em;
 border-top-right-radius: 1em 3em;
 border-bottom-right-radius: 4em 0.5em;
  border-bottom-left-radius: 1em 3em;
用这个属性实现圆角：
<!DOCTYPE html>
<html>
<head>
<title>css3 边框</title>
<style>
div{
text-align: center;
border: 2px solid #aaaaaa;
padding:10px 40px;
background: #dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 属性允许向元素添加圆角。</div>
</body>
</html>
2.border-img
用来将图片规定为包围元素的边框。
border-image中包括：
border-image-source：用在边框的图片的路径
border-image-slice：图片边框向内偏移
border-image-width：图片边框的宽度
border-image-outset：边框图像区域超出边框的量
border-image-repeat：图像边框是否为平铺（repeated）、铺满（rounded）或拉伸（stretched）
其中将图片设置成边框有两种样式：
第一种
<!DOCTYPE html>
<html>
<head>
<title>css3 边框图片</title>
<style>
div{
border:15px solid transparent;
width: 300px;
padding: 10px 20px;
}
#round{
-moz-border-image: url(border.jpg) 30 30 round;
-webkit-border-image: url(border.jpg) 30 30 round;
-o-border-image: url(border.jpg) 30 30 round;
border-image: url(border.jpg) 30 30 round;
}
</style>
</head>
<body>
<div id="round">在这里 图片铺满整个边框</div>
<br>
<p>这是使用的图片：</p>
<img src="border.jpg" alt="">
<!--IE 不支持这个属性-->
</body>
</html>
第二种
<!DOCTYPE html>
<html>
<head>
<title>css3 边框图片</title>
<style>
div{
border:15px solid transparent;
width: 300px;
padding: 10px 20px;
}
#stretch{
-moz-border-image: url(border.jpg) 30 30 stretch;
-webkit-border-image: url(border.jpg) 30 30 stretch;
-o-border-image: url(border.jpg) 30 30 stretch;
border-image: url(border.jpg) 30 30 stretch;
}
</style>
</head>
<body>
<div id="stretch">在这里 图片被拉伸以填充整个区域</div>
<p>这是使用的图片：</p>
<img src="border.jpg" alt="">
<!--IE 不支持这个属性-->
</body>
</html>
3.border-shadow
向方框添加一个阴影。
其属性如下：
h-shadow：必需。水平阴影的位置，允许负值。
v-shadow：必需。垂直阴影的位置，允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。
insrt：可选。将外部阴影（outset）改成内部阴影。
完成效果如下：
<!DOCTYPE html>
<html>
<head>
<title>css3 边框阴影</title>
<style>
div{
width:300px;
height:100px;
background-color: #ff9900;
-moz-box-shadow:10px 10px 5px #888888;
box-shadow:10px 10px 5px #888888;
border-radius:25px;
-moz-border-radius:25px;
padding:10px 40px;
}
</style>
</head>
<body>
<div>box-shadow 用于给方框添加阴影</div>
</body>
</html>
