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;
}

css3,布布扣,bubuko.com

css3

原文：http://www.cnblogs.com/lihaozhou/p/3648326.html