1 边框
1 border-radius:圆角 ie9+ chrome firefox opera
2 box-shadow :边框阴影 ie9+ chrome firefox opera
3 border-image : 边框图片 chrome firefox
1 border-radius:5px;(圆角半径)
-webkit-border-radius:5px;//chrome safari
-ms-border-radius:5px;//ie
-o-border-radius:5px;//opera
-mos-border-radius;5px;//老版firefox
2 border-shadow:5px 5px 5px #fff;(x阴影长度，y阴影长度，模糊度，颜色)
3 border-image:url(border.png) 30 30 round;默认都是stretch拉伸的
举例子说基本的特性
w3cschool上的例子
仔细看使用的图片和没有stretch（使用round）的效果图，你会发现4个角上（中间也不会被拉伸）的红色的四方形没有被拉伸，而中间的就会被重复覆盖
其他参数可以参考 http://msdn.microsoft.com/zh-cn/library/windows/apps/dn308261.aspx
2 背景
1 background-size :背景大小 ie9+ firefox chrome safari
2 backgroind-origin :背景定位区域 （border-box/padding-box/content-box）ie9+ firefox chrome safari
3 background-clip :规定背景绘制的区域（和background-origin不同的是它不是应用在图片背景上，而是底色）ie9+ firefox chrome safari
1 background-size:width height;
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
2 background-origin:border-box|padding-box|content-box
(图来自W3C)
3 background-clip:border-box|padding-box|content-box;
div
{
background-color:yellow;
background-clip:content-box;
}