border-image:

　　　　border-image-source　　/　　border=image-slice　　/　　border=image-width　　/　　border-image-outside　　/　　border-image-repeat;

　　　　如果没有设置border-width，则该属性无效；

　　　　border-image-source:

　　　　　　顾名思义，其值为none或一个url；

　　　　border-image-slice:

　　　　　　这个比较有意思，用来切片，即用1到4个值来从上右下左四个方向将source图片切成九块，也叫切九宫；

　　　　　　slice的值为各个方向从图片边缘向内的偏移量，不带单位（即省略单位px）；但可以使用百分比数值；

　　　　border-image-width:

　　　　　　如果不设置此值，将按照border-width的值，如果设置，则按此值来设定border-image的宽度；

　　　　border-image-outside:

　　　　　　设置border-image的向外偏移量；

　　　　border-image-repeat:

　　　　　　repeat:　　单纯的类似于复制粘贴式的重复平铺对应的切片；

　　　　　　strech:　　强切片进行拉伸以填充整个对应边框；

　　　　　　round:　　只能均分边框区域，以等大小的切片完美填充对应的边框区域；

 

　　border-radius:

　　　　length:　　20px/2em;

　　　　%:　　50%;

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

　　　　上述六个值，用空格分开，前两个为必须值，后面的为可选值；前四个值需要带单位；

　　　　h-shadow:　　横向偏移量；

　　　　v-shadow:　　纵向偏移量

　　　　blur:　　模糊区域宽度；

　　　　spread:　　扩展大小（可缩放阴影面积）；

　　　　color:　　阴影颜色；

　　　　inset:　　内阴影；

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>box-shadow</title>
    <style type="text/css">
        div{width:200px;height:100px;border-radius: 50px;background: yellow;margin: 100px auto;}
        .test1{box-shadow:20px 20px;}  /* h-shadow;v-shadow;*/
        .test2{box-shadow: 20px 20px 20px;}  /*h-shadow;v-shadow;blur*/
        .test3{box-shadow: 20px 20px 20px 20px;}  /*h-shadow;v-shadow;blur;spread*/
        .test4{box-shadow: 20px 20px 20px 20px blue;}  /*h-shadow;v-shadow;blur;spread;color*/
        .test5{box-shadow: 5px 5px 5px 20px blue inset;}  /*h-shadow;v-shadow;blur;spread;color;inset*/
    </style>
</head>
<body>
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
    <div class="test4"></div>
    <div class="test5"></div>
</body>
</html>

 

本文参考自　　　　css3：border-image边框图像详解

感谢前辈的总结；