CSS3边框

　　现在最新版的浏览器基本都支持css3 基本都不用写前缀 ，写前缀是为了向前兼容老版本的浏览器而已

　　　　前缀是-webkit-的Safari和Chrome支持

　　　　前缀是-moz-的Firefox支持

　　　　前缀是-o-的Opera支持

　　　　前缀是-ms-的IE支持

 

　　　CSS3边框

　　　　border-radius （CSS3圆角）

border-radius: 2em  /  2em 1em 4em  /  1em 3em;

is equivalent to:

border-top-left-radius: 2em  /  2em   /  1em;
border-top-right-radius: 2em  /  1em  /  3em;
border-bottom-right-radius: 2em  /  4em  /  1em;
border-bottom-left-radius: 2em  /  1em  /  3em;

   　 注意：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角

　　　　box-shadow （CSS3盒阴影）

border-shadow: 10px(h-shadow)  10px(v-shadow)  5px(blur)  #888(color)

the grammar is:

box-shadow: h-shadow v-shadow blur spread color inset;

 　　　h-shadow : 必须的。水平阴影的位置。允许负值

　　　 v-shadow : 必须的。垂直阴影的位置。允许负值

 　　   blur : 可选。模糊距离

　　　 spread : 可选。阴影的颜色

 　　   inset ： 可选。从外层的阴影（开始时）改变阴影内侧阴影

　　border-image（CSS3边界图片）

-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*/
border-image: url("border.png") 30 30 round;

the grammer is :

border-image:source slice width outset repet;

border-image-source: none | image;        [url("border.png")]
border-slice: number | % | fill;          [30 30]
border-width: number | % | auto;          [initial]   
border-image-outset: length | number;     [initial]
border-image-repeat: stretch | repeat | round | initial | inherit;   [round]

 

　　　 border-image-source : 用于指定要用于绘制边框的图像的位置

 　　   border-image-slice : 图像边界内偏移

　　　 border-image-width : 图像边界的宽度

　　　 border-image-outset : 用于指定在边框外部绘制 border-image-area 的量

　　　 border-image-repeat : 用于图像边界是否拉伸（stretch）、重复（repeat）、铺满（round）、默认值（initial）或者继承（inherit）